JavaScript 进阶第九章(原型链继承)

简介: JavaScript 进阶第九章(原型链继承)

面向对象的特性 封装 和 继承


子类strudent 继承了父类 Person的属性


  // 父类
    function Person(name, height) {
      this.name = name;
      this.height = height;
    }
    Person.prototype.say = function () {
      console.log(this.name);
      console.log(this.height);
    }
    // 子类
    function Student(grade, name, height) {
      // 借用了父类的构造函数,完成对自己的赋值
      Person.call(this, name, height)
      this.grade = grade;
    }
    // 赋值了父类原型上的所有的 属性和方法
    Student.prototype = Person.prototype;
    // 修改之类的指向
    Student.prototype.constructor = Student;
    // 创建子类的实例
    const stu = new Student("两年", "海海呐", 180);
    stu.say();


函数参数默认值


定义函数的同时,可以给形参一个默认值


// 定义函数的同时,可以给形参一个默认值
    function show(msg = "你好呀") {
      console.log(msg);
    }
    show(); // 你好呀
    show("你好,再见"); // 你好,再见


对象简写

const name = "李白";
    const skill = "大河之剑??";
    const say = function () { }
    const obj = {
      name, skill, say
    }
    console.log(obj);// {name:"李白",skill:"大河之剑??",say:function(){}}


解构


提供更加方便获取数组中元素或者对象中属性的写法


获取数组中的元素

const [a, b, c, d] = [1, 2, 3, 4];
      console.log(a, b, c, d); // 1,2,3,4


元素交互顺序


let a = 1111;
     let b = 2222;
     [b, a] = [a, b];
     console.log(a, b); // 2222 1111


获取对象中的属性


const obj = {
        name: "李白",
        skill: "大河之剑???",
        say() { }
      }
      const { name, skill,say } = obj;
      console.log(name, skill,say); // 李白 大河之剑??? function(){}


拓展运算符 || 剩余运算符


通过  ... 符号来获取剩下的参数


函数内获取


function show(a, ...all) { 
      console.log(a);
      console.log(all);
    }
    show(1);// 1 []
    show(1, 2, 3); // 1 [2,3]


数组内获取


const [a, ...rest] = [1, 2, 3, 4, 5];
    console.log(a); // 1
    console.log(rest);// [2, 3, 4, 5]


对象内获取


const obj={
      name:"海海",
      age:"18",
      say(){}
    }
    const {name,...others}=obj;
    console.log(name); // 海海
    console.log(others); // {age: "18", say: ƒ}
相关文章
|
12天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
|
4天前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
|
10天前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
|
11天前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
|
13天前
|
存储 前端开发 安全
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第2天】探索Web存储:localStorage持久化,sessionStorage会话限定,cookies则伴随HTTP请求。了解它们的特性和限制,如localStorage的5MB容量限制、跨域问题,sessionStorage的生命周期,及cookies的安全与带宽消耗。使用时需权衡安全、效率与应用场景。示例代码展示存储与检索方法。
|
14天前
|
设计模式 前端开发 JavaScript
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第1天】JavaScript设计模式增进代码复用和维护性。单例模式确保唯一实例,用闭包防止命名冲突和控制状态访问。观察者模式实现一对多依赖,通过解绑避免内存泄漏。工厂模式封装对象创建,适度使用避免复杂度。装饰者模式动态添加行为,保持简洁以保可读性。理解模式的优缺点,灵活应用,提升代码质量。
|
17天前
|
JavaScript
js奥义:原型与原型链(1)
js奥义:原型与原型链(1)
|
20天前
|
存储 JSON 前端开发
JavaScript 进阶征途:解锁Function奥秘,深掘Object方法精髓
JavaScript 进阶征途:解锁Function奥秘,深掘Object方法精髓
|
5天前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
|
6天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。