ES6 中 class 和 extends 实现原理
在学习中，我们通常会遇到这种场景，在阅读某段实现源码时我们往往能看懂大部分代码，但是却卡在其中的一两个点，导致无法继续阅读。
所以在这里我会先列出 class 和 extends 需要的预备知识。
属性描述符
Object.getOwnPropertyDescriptor() 方法获取元素的属性描述，
/**
* 知识点：属性描述符
* 从 ES5 开始，所有的属性都具备了属性描述符
*
*/
var obj = {
name: "jason"
};
/**
* getOwnPropertyDescriptor
* 获取属性描述符
*/
var des = Object.getOwnPropertyDescriptor(obj, "name");
console.log(des);
/**
* {
* value: 'jason',
* writable: true, // 可写
* enumerable: true, // 可枚举
* configurable: true // 可配置
* }
*/
Object.defineProperty() 定义对象上属性的一些特性
/**
* Object.defineProperty
* 该方法定义对象上属性的一些特性
*
* 第一个参数，目标对象
* 第二个参数，要添加或编辑的属性
* 第三个参数，描述
*/
var obj2 = {};
Object.defineProperty(obj2, "age", {
value: 2,
writable: true,
configurable: true,
enumerable: true
});
console.log(obj2.age); // 2
writable：对象上的属性是否可以修改。兼容模式下编辑不可写元素会编辑失败，严格模式下会报错。
var obj3 = {};
Object.defineProperty(obj3, "age", {
value: 2,
writable: false,
configurable: true,
enumerable: true
});
obj3.age = 23;
console.log(obj3.age); // 2 不可修改
configurable：对象上的属性是否可以配置
var obj4 = {};
Object.defineProperty(obj4, "age", {
value: 22,
writable: true,
configurable: false, // 不可配置
enumerable: true
});
/**
* 再次定义
* 此时会报错
*/
// Object.defineProperty(obj4, "age", {
// value: 22,
// writable: true,
// configurable: false,
// enumerable: true
// });
delete obj4.age;
console.log(obj4.age); // 22 属性删除失败，应为属性不可配置
enumerable： 当 enumerable 为 false 之后，for…in 不会遍历到该对象
/**
* enumerable
* 当 enumerable 为 false 之后，for...in 不会遍历到该对象
*/
var obj5 = {
weight: "66kg"
};
Object.defineProperty(obj5, "height", {
value: "176cm",
writable: true,
configurable: true,
enumerable: false // 不可枚举
});
let keys = Object.keys(obj5);
console.log(keys); // [ 'weight' ] 属性 height 不可遍历
prototype，constructor，__proto__ 三者之间的关系
es6 中类的实现 和 es5 比较
es6 中类的实现
class Parent {
constructor(name) {
this.name = name;
}
/**
* 静态方法，通过 Parent 调用
*/
static getMe() {
console.log("this is super");
}
/**
* 公共方法，在 prototype 上
*/
getName() {
console.log(this.name);
}
}
es5 实现方式
/**
* 立即执行闭包
* @param {*} Constructor 构造函数
* @param {*} protoProps 原型属性
* @param {*} staticProps 静态属性
* @return {function}
*/
var _createClass = (function() {
/**
* 为属性添加描述符
* @param {object} target 目标对象
* @param {Array} props 属性
*/
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
/**
* @param {Object} Constructor
* @param {array} protoProps 原型属性
* @param {array} staticProps 静态属性
*/
return function(Constructor, protoProps, staticProps) {
// 原型上属性, 添加到Constructor 的原型上
if (protoProps) defineProperties(Constructor.prototype, protoProps);
// 类上的属性, 添加到Constructor 类上
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
/**
* 检测函数
* es6 中 类不能直接调用
* @param {*} instance 实例
* @param {*} Constructor 构造函数
*/
function _classCallCheck(instance, Constructor) {
console.log(instance.__proto__);
console.log(Constructor.prototype);
// instance 是否是 Constructor 的实例
console.log(instance.__proto__ === Constructor.prototype);
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
/**
* 立即执行闭包
* @return {function}
*/
var Parent = (function() {
function Parent(name) {
// 验证是否是实例化类
// es6不允许类直接调用，直接调用抛出异常
_classCallCheck(this, Parent);
this.name = name;
}
_createClass(
Parent,
[
{
key: "getName",
value: function getName() {
console.log(this.name);
}
}
],
[
{
key: "getMe",
value: function getMe() {
console.log("this is super");
}
}
]
);
return Parent;
})();
es6 中继承的实现 和 es5 比较
es6 中继承的实现
class Child extends Parent {
constructor(name, age) {
super(name);
this.age = age;
}
sayHello() {
console.log(`hello my age is ${this.age}`);
}
}
es5 继承关键字实现
/**
* 继承
* @param {*} subClass 子类
* @param {*} superClass 父类
*/
function _inherits(subClass, superClass) {
// 类型检测
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError(
"Super expression must either be null or a function, not " +
typeof superClass
);
}
/**
* Object.create 接受两个参数
* 指定原型创建对象
* @param {*} 目标原型
* @param {*} 添加属性
*/
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass, // subClass.prototype.constructor 指向 subClass
enumerable: false, // constructor 不可枚举
writable: true,
configurable: true
}
});
/**
* Object.setPrototypeOf 方法
* 设置子类的 __proto__ 属性指向父类
* @param {*} 子类
* @param {*} 父类
*/
if (superClass) {
// 设置子类的__proto__ 让 Child 能访问父类静态属性
Object.setPrototypeOf
? Object.setPrototypeOf(subClass, superClass)
: (subClass.__proto__ = superClass);
}
}
es5 中继承的实现
/**
* 调用父类的 Constructor 构造函数
*/
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError(
"this hasn't been initialised - super() hasn't been called"
);
}
return call && (typeof call === "object" || typeof call === "function")
? call
: self;
}
/**
* @param {*} _Parent 传入父类
*/
var Child = (function(_Parent) {
_inherits(Child, _Parent);
function Child(name, age) {
_classCallCheck(this, Child);
/**
* 调用父类的 Constructor 构造函数
*/
var _this = _possibleConstructorReturn(
this,
(Child.__proto__ || Object.getPrototypeOf(Child)).call(this, name) // 调用父类Constructor
);
_this.age = age;
return _this;
}
_createClass(Child, [
{
key: "sayHello",
value: function sayHello() {
console.log("hello my age is " + this.age);
}
}
]);
return Child;
})(Parent);
完结
以上就是 es6 class 和 extends 的 es5 实现方式，以上代码有一些隐藏细节还需要自学，以下是用到的知识点
- 属性描述符
- Object.create 引用原型链需要指定 Constructor 属性
- new 关键字的实现方式 其中需要设置 __proto__ 属性
- Object.setPrototypeOf 实现原理 让子类的__proto__ = 父类
- instanceof 判断 子类的__proto__ === 父类
- 调用子类的 Constructor 也会调用父类的 Constructor
- 设置子类的 __proto__ = 父类，让子类可以调用父类静态方法