JavaScript继承的几种方式
因为es5的继承方式大量使用了new, 所以先谈一下new关键字
new:
- 创建一个新对象。
- 这个新对象会被执行"原型"连接。
- 将构造函数的作用域赋值给新对象，即this指向这个新对象.
- 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
function new(func) {
lat target = {};
target.__proto__ = func.prototype;
let res = func.call(target);
if (typeof(res) == "object" || typeof(res) == "function") {
return res;
}
return target;
}
字面量创建对象，不会调用 Object构造函数, 简洁且性能更好;
new Object() 方式创建对象本质上是方法调用，涉及到在proto链中遍历该方法，当找到该方法后，又会生产方法调用必须的 堆栈信息，方法调用结束后，还要释放该堆栈，性能不如字面量的方式。
通过对象字面量定义对象时，不会调用Object构造函数。
父类
// 定义一个动物类
function Animal (name) {
// 属性
this.name = name || 'animal';
// 实例方法
this.sleep = function(){
console.log(this.name + '正在睡觉！');
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃：' + food);
};一. 原型链继承
核心: 将父类的实例作为子类的原型
1) 子类.prototype = new 父类();
2) 子类.prototype.属性 = xxx
3) 子类.prototype.方法 = xxx
4) new 子类()获取实例, 该实例可以调用父类的属性和方法
function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
Cat.prototype.eat = function (sth) {
console.log(this.name, ' is eating', sth)
}
Cat.prototype.walk = function () {
console.log(this.name, ' is walking')
}
Cat.prototype.sleep = function () {
console.log(this.name, ' is sleeping')
}
//var cat = new Cat();
//console.log(cat.name);
//console.log(cat.eat('fish'));
//console.log(cat.sleep());
//console.log(cat instanceof Animal); //true
//console.log(cat instanceof Cat); //true
var cat = new Cat();
console.log(cat.name); // cat
console.log(cat.sleep()); // cat正在睡觉
console.log(cat.eat('三明治')); // cat is eating 三明治
console.log(cat.walk());// cat is walking特点:
1. 纯粹的继承关系, 实例是子类的实例, 也是父类的实例
2. 父类的原型方法或者原型属性, 子类都能访问到
缺点:
1. 要想为子类新增属性和方法, 必须在new animal这样的语句之后才行, 不能放到构造器之中
2. 无法实现多继承
3. 来自原型对象的所有属性被所有实例共享
4. 创建子类实例函数时, 无法向父类构造函数传参
二. 构造继承
核心: 使用父类的构造函数来增强子类的实例, 等于是复制父类的实例属性给子类
1) 在子类构造函数中使用call将父类的this指向自己
2) 在子类构造函数中新增属性
2) new 子类获取实例, 该实例能够使用父类的属性和方法
特点:
1. 解决了[一.原型链继承]中实例共享父类引用属性的问题
2. 创建子类实例时, 可以向父类传递参数
3. 可以实现多继承, call多个父类对象
缺点:
1. 实例只是子类的实例, 不是父类的实例
2. 只能继承父类的实例属性和方法, 不能继承原型属性和方法
3. 无法实现函数复用, 每个子类都有父类实例函数的副本, 影响性能
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype.eat = function (sth) {
console.log(this.name, ' is eating', sth)
}
Cat.prototype.walk = function () {
console.log(this.name, ' is walking')
}
Cat.prototype.sleep = function () {
console.log(this.name, ' is sleeping')
}
//var cat = new Cat();
//console.log(cat.name);
//console.log(cat.sleep());
//console.log(cat instanceof Animal); // false
//console.log(cat instanceof Cat); // true
var cat = new Cat('Tom');
console.log(cat.name); // Tom
console.log(cat.sleep()); // Tom正在睡觉
console.log(cat.eat('三明治')); // Tom is eating 三明治
console.log(cat.walk());// Tom is walking三. 实例继承
核心: 为父类实例添加新特性, 作为子类实例返回
function Cat(name){
var instance = new Animal();
instance.name = name || 'Tom';
return instance;
}
Cat.prototype.eat = function (sth) {
console.log(this.name, ' is eating', sth)
}
Cat.prototype.walk = function () {
console.log(this.name, ' is walking')
}
Cat.prototype.sleep = function () {
console.log(this.name, ' is sleeping')
}
//var cat = new Cat();
//console.log(cat.name);
//console.log(cat.sleep());
//console.log(cat instanceof Animal); // true
//console.log(cat instanceof Cat); // false
var cat = new Cat('Tom');
console.log(cat.name); // Tom
console.log(cat.sleep()); // Tom正在睡觉
console.log(cat.eat('三明治')); // Tom is eating 三明治
console.log(cat.walk());// Uncaught TypeError: cat.walk is not a function
// 子类独有的原型方法访问不到!!!特点:
1. 不限制调用方式, 无论是new 子类还是子类(), 返回的对象具有相同的效果
缺点:
1. 实例是父类的实例, 不是子类的实例!!!
2. 不支持多继承
四. 拷贝继承
核心:
1) 子类通过new 父类获取实例
2) for in遍历拷贝该实例赋值到子类.prototype上
3) new 子类获取子类的实例, 可以通过该实例调用父类的属性和方法
特点:
1. 支持多继承
缺点:
1. 效率较低, 内存较高, 因为要拷贝父类的属性
2. 无法获取父类不可枚举的方法(不可枚举方法, 不能使用for in访问)
function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
Cat.prototype.name = name || 'Tom';
}
Cat.prototype.eat = function (sth) {
console.log(this.name, ' is eating', sth)
}
Cat.prototype.walk = function () {
console.log(this.name, ' is walking')
}
Cat.prototype.sleep = function () {
console.log(this.name, ' is sleeping')
}
//var cat = new Cat();
//console.log(cat.name);
//console.log(cat.sleep());
//console.log(cat instanceof Animal); // false
//console.log(cat instanceof Cat); // true
var cat = new Cat('Tom');
console.log(cat.__proto__ === Cat.prototype) // true
console.log(Cat.__proto__ === Animal) // false
console.log(Cat.__proto__ === Function.prototype) // true
console.log(Cat.prototype.__proto__ === Animal.prototype) // false
console.log(Animal.prototype.__proto__ === Object.prototype) // true
console.log(Cat.prototype.constructor === Cat) // true
console.log(cat.name); // Tom
console.log(cat.sleep()); // Tom正在睡觉
console.log(cat.eat('三明治')); // Tom is eating 三明治
console.log(cat.walk());// Tom is walking五. 组合继承
核心:
1) 子类构造函数中通过call改变父类this指向自己
2) 子类构造函数中新增属性
3) 子类.prototype = new 父类()
4) 子类.prototype.constructor = 子类(修复构造器)
5) 使用new 子类()获取子类的实例, 使用该实例可以获取父类的属性和方法
特点:
1. 弥补了方式2的缺陷, 可以继承实例/属性方法, 也可以继承原型属性/方法
2. 既是子类的实例, 又是父类的实例,
3. 不存在引用属性共享问题
4. 可传参
5. 函数可复用
缺点:
1. 调用了2次父类构造函数, 生成了两份实例(子类实例将子类原型上的那份屏蔽了)
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.eat = function (sth) {
console.log(this.name, ' is eating', sth)
}
Cat.prototype.walk = function () {
console.log(this.name, ' is walking')
}
Cat.prototype.sleep = function () {
console.log(this.name, ' is sleeping')
}
Cat.prototype.constructor = Cat;
//var cat = new Cat();
//console.log(cat.name);
//console.log(cat.sleep());
//console.log(cat instanceof Animal); // true
//console.log(cat instanceof Cat); // true
var cat = new Cat('Tom');
console.log(cat.__proto__ === Cat.prototype) // true
console.log(Cat.__proto__ === Animal) // false
console.log(Cat.__proto__ === Function.prototype) // true
console.log(Cat.prototype.__proto__ === Animal.prototype) // true
console.log(Animal.prototype.__proto__ === Object.prototype) // true
console.log(Cat.prototype.constructor === Cat) // true
console.log(cat.name); // Tom
console.log(cat.sleep()); // Tom正在睡觉
console.log(cat.eat('三明治')); // Tom is eating 三明治
console.log(cat.walk());// Tom is walking六. 寄生组合继承(推荐)
核心: 通过寄生方式, 砍掉父类的的实例属性, 这样, 在调用2次父类实例的时候, 就不会初始化2次实例方法属性, 避免[五.组合继承]的缺点
特点: 推荐, 较为完美
缺点: 实现较为复杂
寄生组合继承1
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
Cat.prototype.eat = function (sth) {
console.log(this.name, ' is eating', sth)
}
Cat.prototype.walk = function () {
console.log(this.name, ' is walking')
}
Cat.prototype.sleep = function () {
console.log(this.name, ' is sleeping')
}
Cat.prototype.constructor = Cat; // 需要修复下构造函数
//var cat = new Cat();
//console.log(cat.name);
//console.log(cat.sleep());
//console.log(cat instanceof Animal); // true
//console.log(cat instanceof Cat); //true
var cat = new Cat('Tom');
console.log(cat.__proto__ === Cat.prototype) // true
console.log(Cat.__proto__ === Animal) // false
console.log(Cat.__proto__ === Function.prototype) // true
console.log(Cat.prototype.__proto__ === Animal.prototype) // true
console.log(Animal.prototype.__proto__ === Object.prototype) // true
console.log(Cat.prototype.constructor === Cat) // true
console.log(cat.name); // Tom
console.log(cat.sleep()); // Tom正在睡觉
console.log(cat.eat('三明治')); // Tom is eating 三明治
console.log(cat.walk());// Tom is walking寄生组合继承2
function Cat (name) {
// 初始化父类, 独立各自的属性
Animal.call(this, name)
this.name = name||''
}
// 设置原型
Cat.prototype = Object.create(Animal.prototype);
// 修复构造函数
Cat.prototype.constructor = Cat
Cat.prototype.eat = function (sth) {
console.log(this.name, ' is eating', sth)
}
Cat.prototype.walk = function () {
console.log(this.name, ' is walking')
}
Cat.prototype.sleep = function () {
console.log(this.name, ' is sleeping')
}
var cat = new Cat('Tom');
console.log(cat.__proto__ === Cat.prototype) // true
console.log(Cat.__proto__ === Animal) // false
console.log(Cat.__proto__ === Function.prototype) // true
console.log(Cat.prototype.__proto__ === Animal.prototype) // true
console.log(Animal.prototype.__proto__ === Object.prototype) // true
console.log(Cat.prototype.constructor === Cat) // true
console.log(cat.name); // Tom
console.log(cat.sleep()); // Tom正在睡觉
console.log(cat.eat('三明治')); // Tom is eating 三明治
console.log(cat.walk());// Tom is walking
七. class继承(推荐)
class Cat extends Animal {
constructor(name) {
super(name)
this.name = name||''
}
}
Cat.prototype.eat = function (sth) {
console.log(this.name, ' is eating', sth)
}
Cat.prototype.walk = function () {
console.log(this.name, ' is walking')
}
Cat.prototype.sleep = function () {
console.log(this.name, ' is sleeping')
}
var cat = new Cat('Tom');
console.log(cat.__proto__ === Cat.prototype) // true
console.log(Cat.__proto__ === Animal) // true
console.log(Cat.prototype.__proto__ === Animal.prototype) // true
console.log(Animal.prototype.__proto__ === Object.prototype) // true
console.log(Cat.prototype.constructor === Cat) // true
console.log(cat.name); // Tom
console.log(cat.sleep()); // Tom正在睡觉
console.log(cat.eat('三明治')); // Tom is eating 三明治
console.log(cat.walk());// Tom is walking在类继承中, 有下面几个规律:
子类new出来的实例对象 instanceof 父类为true
子类new出来的实例对象 instanceof 子类自身为true
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
子类的实例.__proto__等于子类的prototype
console.log(cat.__proto__ === Cat.prototype) // true
子类的__proto__等于父类
注意: 分情况!!!
1) 当Animal为class时:
console.log(Cat.__proto__ === Animal) // true
2) Animal为构造函数时(查看[六. 寄生组合继承]):
console.log(Cat.__proto__ === Animal) // false
console.log(Cat.__proto__ === Function.prototype) // true
子类.prototype.__proto__ = 父类.prototype
console.log(Cat.prototype.__proto__ === Animal.prototype) // true
最大的父类.prototype.__proto__ 等于Object.prototype
console.log(Animal.prototype.__proto__ === Object.prototype) // true
父类.prototype.constructor = 父类自身
console.log(Cat.prototype.constructor === Cat) // true