JavaScript难点系列(六):原型链与继承
来源:互联网 发布:porter robinson知乎 编辑:程序博客网 时间:2024/06/05 20:05
类和构造函数
JS中使用构造函数来定义类:
function Range(from, to) { this.from = from this.to = to}Range.prototype.includes = function(x) { return this,from <= x && x <= this.to}Range.prototype.toString = function() { return this.from + '...' + this.to}var r1 = new Range(1, 3)console.log(r.includes(2)) // trueconsole.log(r.toString()) // 1...3
上述代码声明了一个Range构造函数,生成了类Range,使用new关键字能生成实例对象r1。
new Range(1, 3)这句表达式做了如下的事情:
var obj = {}obj.__proto__ = Range.prototypevar result = Range.call(obj, 1, 3)return typeof result === 'obj' ? result : obj
第一步新建一个空对象。
第二步把新对象的__proto__设置为Range的prototype,即Range的原型。
第三步给Range构造函数传参来给新对象的属性赋值。
第四步检测Range构造函数有没有返回一个新对象,如果有就返回它,如果没有就返回已经赋值好属性的obj。
其实new关键字就是一个语法糖,类似于一个函数而已,我们使用了它,就相当于写了上面这四句代码。
new完后我们就可以说r1对象是Range类的实例,但构造函数只是类的公有标识,并不是唯一标识。也就是说两个不同的构造函数的prototype属性可以指向同一个原型对象,那么它们创建的实例都是属于同一个类的。所以原型对象才是类的唯一标识,下面介绍的检测类型的方法也是依据实例对象是否继承自某个原型对象,而不是检测实例对象是由哪个构造函数初始化而来。
一共有三种检测对象的类的技术:
1. o instanceof Range
如果o继承自或者间接继承自Range.prototype,那么上面的表达式的结果为true
2. Range.prototype.isPrototypeOf(o)
如果o继承自或者间接继承自Range.prototype,那么上面的表达式的结果为true
原型链和继承
JS中实现继承主要是依靠原型链来实现的。其基本思想是让子类型的原型对象等于父类型的实例。而一般的继承实现有三种方式:原型链继承、借用构造函数继承、组合继承。
原型链继承
function super() { this.colors = ["red", "blue", "green"];}function sub() {}sub.prototype = new super();var instance1 = new sub();instance1.colors.push("black");alert(instance1.colors); //"red,blue,green,black"var instance2 = new sub();alert(instance2.colors); //"red,blue,green,black"
上述代码把sub的原型对象赋值为super父类的实例对象,于是super实例的属性就变为sub的原型属性了。但这样存在两个问题:
1. super实例属性上如果存在引用类型值,那么sub的原型对象属性上也会有拥有相同的引用类型值。于是sub的所有实例对象都会共享其原型对象上的引用类型属性。上述代码中对instance1的改动就影响到了instance2。
2. 在创建sub类型的实例时,不能向super类型的构造函数传递参数。也就是说super类型的构造函数如果需要用到参数,只能使用默认值。
借用构造函数
为了解决原型链继承的引用类型值所带来的问题,出现了一种称为借用构造函数的技术(经典继承)。其基本思想是在子类型构造函数的内部调用父类型的构造函数。
function super(name) { this.colors = ["red", "blue", "green"]; this.name = name;}function sub() { super.call(this, "jaja");}var instance1 = new sub();instance1.colors.push("black");alert(instance1.colors); //"red,blue,green,black"alert(instance1.name); // "jaja"var instance2 = new sub();alert(instance2.colors); //"red,blue,green"
虽然这种继承方法“继承”了父类的构造函数里的实例属性,但无法继承父类的原型中定义的方法。单单继承了构造函数中的属性而无法复用父类的原型方法,那么就不能称得上是真正的继承。
组合继承
为了发挥上面两张继承方式的优点,技术人员又发明了组合继承。其主要思想是使用原型链来实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。
function super() { this.colors = ["red", "blue", "green"];}function sub() { super.call(this);}sub.prototype = new super();sub.prototype.constructor = sub;var instance1 = new sub();instance1.colors.push("black");alert(instance1.colors); //"red,blue,green,black"var instance2 = new sub();alert(instance2.colors); //"red,blue,green"
组合继承可以看作是对原型链继承的增强,它与原型链继承的主要不同是在子类的构造函数中引用了父类的构造函数。这样即使使用sub.prototype = new super()继承了父类的引用类型值,但后面在new sub()时通过sub的构造函数用实例属性覆盖了super的引用类型值,而super的原型对象的方法仍旧保留着没被覆盖。
- JavaScript难点系列(六):原型链与继承
- 深入理解JavaScript系列(二): 原型、原型链与继承
- javascript原型链与原型继承
- JavaScript 原型、原型链与继承
- JavaScript 原型与继承链
- javascript继承与原型链
- JavaScript 继承与原型链
- JavaScript继承与原型链
- JavaScript学习系列之初识原型继承和原型链
- JavaScript原型与继承
- JavaScript原型与继承
- Javascript继承(原型链)
- javascript 学习笔记(2) 原型链与继承
- Javascript 笔记(4)----继承与原型链
- JavaScript 指南 - 继承与原型链
- JavaScript原型链与继承小结
- JavaScript基础之继承与原型链
- JavaScript原型链与继承内容总结
- Maven -- 将引用的本地jar文件打进war包里
- ssh端口转发
- 51 mod P1627 瞬间移动 排列组合
- fastclick.js解决移动端(ipad)点击事件反应慢问题
- cordova震动蜂鸣器输入参数
- JavaScript难点系列(六):原型链与继承
- Java设计模式总结——6大设计原则
- 剑指offer——63.滑动窗口的最大值
- 机器学习-集成算法
- 使用Git从github clone代码
- Netty系列三:netty线程模型
- 事务、视图和索引
- tldr安装
- Java内部类