javascript类继承的实现方法
作者:Fogwind
JavaScript是一种面向对象的语言,而继承是面向对象编程的一个重要特性,在JavaScript中,继承的实现方式有多种,本文将介绍javascript类的继承的实现,感兴趣的朋友一起看看吧
首先需要知道两个概念:
- 构造函数的
prototype
属性是实例的原型,这个属性的值是一个对象,可以被重新赋值,比如有时候为了简便会把prototype
属性重新赋值为一个对象字面量; - 每个对象都有一个
__proto__
内部属性,指向自己的原型,虽然是非标准的,但是各大浏览器都实现了他,在mdn文档中提到的[[Prototype]]
就是__proto__
。比如实例的__proto__
属性就是指向了构造函数的prototype
;
下面的代码来自@better-scroll/core实现了类的继承。
// extendStatics函数的作用是实现类静态方法的继承,构造函数原型继承,最终结果是d可以访问b的属性和方法。 var extendStatics = function (d, b) { // Object.setPrototypeOf() 方法设置一个指定的对象的原型(即,内部 [[Prototype]] 属性)到另一个对象或 null。是Object.prototype.__proto__ 的替代 extendStatics = Object.setPrototypeOf || ( // 这里的逻辑是:如果当前环境支持 __proto__关键字, 就用__proto__修改原型的指向 { __proto__: [] } // instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 instanceof Array && function (d, b) { d.__proto__ = b; // 把d的原型指向b } ) || /* 如果以上两者修改原型指向的方法都不支持那么手动将b上的属性添加到d上 */ function (d, b) { for (var p in b) { // 如果p是对象b自身的属性,那么将属性p添加到对象d上 if (Object.prototype.hasOwnProperty.call(b, p)) { d[p] = b[p]; } } }; return extendStatics(d, b); }; function __extends(d, b) { extendStatics(d, b); // 这里 __ 函数的作用是: 1. 保证d的构造函数指向正确;2.通过 __ 的实例实现继承; function __() { this.constructor = d; } __.prototype = b.prototype; //Object.create() 方法创建一个新对象,使用现有的对象来提供新创建的对象的 __proto__ // 如果b不是null, d.prototype = new __(); d.prototype.__proto__ = b.prototype; d.prototype = b === null ? Object.create(b) : new __(); }
对于__extends
函数中的如下代码:
function __() { this.constructor = d; } __.prototype = b.prototype; d.prototype = new __();
其实这段逻辑用Object.create()
也能实现,用Object.create()
实现后的__extends
如下:
function __extends(d, b) { extendStatics(d, b); d.prototype = Object.create(b.prototype); d.prototype.constructor = d; }
到此这篇关于javascript类的继承的实现的文章就介绍到这了,更多相关js类继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!