你知道几种继承方式?(结尾有彩蛋)
栏目: JavaScript · 发布时间: 5年前
内容简介:首先准备一个构造函数(后几个皆以此为例)此时在控制台中查看S里是这样的优点: 使用简单,好理解
(转载请注明出处)(๑•ᴗ•๑) 复制代码
首先准备一个构造函数(后几个皆以此为例)
function Person() { this.name = 'person', this.age = 18 } Person.prototype.eat = function () {} 复制代码
1原型继承
function Student() {} Student.prototype = new Person var s = new Student 复制代码
此时在控制台中查看S里是这样的
{ __proto__: Student.prototype { name: 'person', age: 18, __proto__: Person.prototype { eat: function () {}, __proto__: Object.prototype } } } 复制代码
优点: 使用简单,好理解
缺点: 原型链多了一层,并且这一层没什么用
2借用构造函数继承
function Student() { Person.call(this) } var s = new Student 复制代码
此时在控制台中查看S里是这样的
{ name: 'person', age: 18, __proto__: Student.prototype { constructor: Student, __proto__: Object.prototype } } 复制代码
优点: 直接把属性变成自己的了
缺点: 没有父类原型上的东西
3组合继承
function Student() { Person.call(this) } Student.prototype = new Person } var s = new Student 复制代码
此时在控制台中查看S里是这样的
{ name: 'person', age: 18, __proto__: new Person { name: 'person', age: 18, __proto__: Person.prototype { eat: function () {}, constructor: Person, __proto__: Object.prototype } } } 复制代码
优点: 属性继承来变成自己的,原型也继承过来了
缺点: 第一层原型没用,继承的原型多走一步
4拷贝继承
function Student() { var p = new Person for (var key in p) { Student.prototype[key] = p[key] } } var s = new Student 复制代码
此时在控制台中查看S里是这样的
{ __proto__: Student.prototype { name: 'person', age: 18, eat: function () {}, constructor: Student, __proto__: Object.prototype } } 复制代码
优点: 属性和方法都继承来放在我自己的原型上了
缺点: for in 循环,相当消耗性能的一个东西
5寄生继承
function Student() { this.gender = '男' var p = new Person return p } Student.prototype.fn = function () {} var s = new Student 复制代码
这里很明显,此时直接得到的是 Person 的实例, this.gender
和 fn()
不会存在在s中
优点: 完美的继承了属性和方法
缺点: 根本没有自己的东西了
6寄生式组合继承1
function Student() { Person.call(this) } Student.prototype.fn = function () {} Student.prototype = Person.prototype var s = new Student 复制代码
此时在控制台中查看S里是这样的
{ name: 'person', age: 18, __proto__: Person.prototype { eat: function () {}, constructor: Person, __proto__: Object.prototype } } 复制代码
优点:原型的东西不需要多走一步
缺点: 没有自己的原型
7寄生式组合继承2
function Student() { Person.call(this) } (function () { function Abc() {} Abc.prototype = Person.prototype Student.prototype = new Abc })() var s = new Student 复制代码
此时在控制台中查看S里是这样的
{ name: 'person', age: 18, __proto__: new Abc { __proto__: Person.prototype { eat: function () {} } } } 复制代码
优点: 属性继承来是自己的,方法也继承来了,组合式继承的中间那个环节多余的属性没有了
缺点: 就是多了一个 空环,导致我访问继承的方法的时候要多走一步
8混搭式继承
function Student() { Person.call(this) } (function () { var obj = Person.prototype for (var key in obj) { Student.prototype[key] = obj[key] } })() var s = new Student 复制代码
此时在控制台中查看S里是这样的
{ name: 'person', age: 18, __proto__: Student.prototype { constructor: Student, eat: function () {}, __proto__: Object.prototype } } 复制代码
优点: 属性原型都有了,没有多余的空环, constructor
直接指向自己
缺点: for in
循环。然后就没有缺点~~~(因为是自创的hhh)
复联四你看了吗?被剧透了吗-。-好气哟 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- c# – 将新节点添加到xml结尾的最快方法?
- Vue2.0 + ElementUI 手写权限管理系统后台模板(四)——组件结尾
- 火星晨报0117:Grin首秀,日间最高涨幅800%;ETC 51%双花攻击戏剧性结尾:黑客归还全部所得ETC
- 新年彩蛋之中大奖
- react 高阶函数详解(附送彩蛋)
- 谁该为阿里彩蛋背锅?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
你不知道的JavaScript(上卷)
[美] Kyle Simpson / 赵望野、梁杰 / 人民邮电出版社 / 2015-4 / 49.00元
JavaScript语言有很多复杂的概念,但却用简单的方式体现出来(比如回调函数),因此,JavaScript开发者无需理解语言内部的原理,就能编写出功能全面的程序;就像收音机一样,你无需理解里面的管子和线圈都是做什么用的,只要会操作收音机上的按键,就可以收听你喜欢的节目。然而,JavaScript的这些复杂精妙的概念才是语言的精髓,即使是经验丰富的JavaScript开发者,如果没有认真学习也无......一起来看看 《你不知道的JavaScript(上卷)》 这本书的介绍吧!