extends的实现

extends的JS实现

自己做的笔记，源于ts编译成js后对extends实现的源码，内容如有雷同 纯属巧合

Class 的实现

通过闭包来创造函数作用域

// ts
// ts中的class关键字
class Cat {
	constructor(private name) {}
	run() {
		console.log('cat is run! ')
	}
}

// js
// 编译为js 为一个自执行函数 返回一个构造函数
var Cat = (function() {
	function Cat(name) {
		this.name = name
	}
	Cat.prototype = {
		run() {
			console.log('cat is run! ')
		}
	}
	return Cat;
})()

extends的实现

TS代码如下：

// ts中的继承 extends
class Animal {
  constructor(public name) {
    console.log(`首次被创建，大家好，我是${this.name}!`);
  }
  run() {
    console.log(`${this.name} 正在奔跑`);
  }
}

class Cat extends Animal {
  constructor(public name, private color) {
    super(name);
  }
  speak() {
    console.log(`${this.color}的猫说话了，我的名字是${this.name} ，喵喵喵！`);
  }
}

let cat = new Cat("tiger", "黑色");
cat.run();
cat.speak();

转化为JS代码如下：

// @class Animal
 var Animal = (function () {
		function Animal(name) {
			this.name = name
			console.log(`首次被创建，大家好，我是${this.name}!`);
		}
		Animal.prototype.run = function () {
			console.log(`${this.name} 正在奔跑`);
		}
		return Animal
	})()

// @class Cat
var Cat = (function (_super) {
	__extends(Cat, _super) // 建立继承关系
	function Cat(name, color){
		// @super(name)
		var _this = _super.call(this, name) || this
		_this.name = name
		_this.color = color
	}
})(Animal)

// __extends的实现（原型链） @d extends b
var __extends = (function() {
	var extendStatics = function(d, b) {
		if(Object.setPrototypeOf) {
			return Object.setProtoTypeOf
		}
		// setPrototypeOf的pollify
		// 判断是否支持__proto__
		if({__proto__: []} instanceof Array) {
			return function(d, b) {
				d.__proto__ = b
			}
		}
		return function(d, b) {
			for(var p in b) {
				if(b.hasOwnProperty(p)) {
					d[p] = b[p]
				}
			}
		}
	}
	return function(d, b) {
		// extendStatics 函数 改变了d 的__proto__指向
		extendStatics(d, b)
		// this在实际调用中指向的是d.prototype
		function __() { this. constructor = b }
		// 改变d 的prototype指向
		__.prototype = b.prototype
		d.prototype = new __()
	}
})()

简化上面的__extends函数，其实它只做了两件事

// 简化代码-->便于理解
var __extends = (function(d, b){
		d.__proto__ = b.prototype
		d.prototype = new b()
})(Cat, Animal)

实现extends继承的关键函数

• Object.setPrototypeof(obj, prototype)
• Object.createObject(obj)

均返回一个object对象

// setPrototyoeof(obj, prototype)指定一个对象的原型[[prototype]]
var newObj = Object.setPrototypeof(o, obj)

// 可以理解为把o的[[prototype]]关联(委托)到obj上
// 即给o的原型链上添加对象obj
var o = Object.createObject(obj)