🍉JavaScript进阶——继承

简介: 🍉JavaScript进阶——继承

1. 继承


ES6之前并没有给我们提供extends继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承


1.1 call()


调用这个函数,并且修改函数运行时的this指向


fun.call(thisArg,arg1,arg2,...)
复制代码


  • thisArg:当前调用函数this的指向对象
  • arg1,arg2:传递的其他参数


c41a91a9d30940d89b4699a51cb4d6c9_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


1.2 借用构造函数继承父类型属性


核心原理:通过call()把父类型的this指向子类型的this,这样就可以实现子类型继承夫类型的属性。


// 借用父构造函数继承属性
        // 1.父构造函数
        function Father(uname, age) {
            // this 指向父构造函数的对象实例
            this.uname = name;
            this.age = age;
        }
        // 2.子构造函数
        function Son(uname, age) {
            // this 指向子构造函数的对象实例
            Father.call(this, uname, age);
        }
        var son = new Son("刘德华", 18);
        console.log(son);
复制代码


6d6a9dbc95584f028d5203f2e8b6a29b_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


1.3 借用原型对象继承父类型方法

d57c196906024610bb1ea95b1d2f07b6_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


79392801ce0140108fd5399063f7f4c6_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


Son.prototype=Father.prototype; 这样直接赋值会有问题,如果修改了子原型的对象,父原型对象也会跟着一起变化
复制代码


正确做法:


Son.prototype = new Father();
复制代码


2849a0a3c67a4937bf60525a2b91bb1f_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


注意:如果利用对象修改了原型对象,别忘了利用constructor指回原来的构造函数


22e232eec388471ab24d93bbaa3c2d0e_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

相关文章
|
14天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
1月前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断:深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句,它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧,包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性,避免 falsy 值陷阱,利用逻辑运算符优化,并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
24 0
|
1月前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
15 0
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
31 0
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
32 0
|
2月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
22 0
|
5天前
|
JavaScript 前端开发
JavaScript 中最常用的继承方式
【5月更文挑战第9天】JavaScript中的继承有多种实现方式:1) 原型链继承利用原型查找,但属性共享可能引发问题;2) 借用构造函数避免共享,但方法复用不佳;3) 组合继承结合两者优点,是最常用的方式;4) ES6的class继承,是语法糖,仍基于原型链,提供更直观的面向对象编程体验。
15 1
|
5天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念
【5月更文挑战第9天】JavaScript继承有优点和缺点。优点包括代码复用、扩展性和层次结构清晰。缺点涉及深继承导致的复杂性、紧耦合、单一继承限制、隐藏父类方法以及可能的性能问题。在使用时需谨慎,并考虑其他设计模式。
12 2
|
6天前
|
JavaScript 前端开发 开发者
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
10 0
|
15天前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点