深远精晓JavaScript世袭的多样方法和优劣点

JavaScript 深入之继承的多种方式和优缺点

2017/05/28 · JavaScript
· 继承

原文出处: 冴羽   

写在前面

•借用构造函数 (又叫伪造对象或经典继承)
•组合继承(也叫伪经典继承)
•寄生组合式继承

来自《JavaScript高级程序设计》

写在前面

这篇文章讲解创建对象的各种方式,以及优缺点。

但是注意:

这篇文章更像是笔记,因为《JavaScript高级程序设计》写得真是太好了!

写在前面

本文讲解JavaScript各种继承方式和优缺点。

但是注意:

这篇文章更像是笔记,哎,再让我感叹一句:《JavaScript高级程序设计》写得真是太好了!

本文讲解JavaScript各种继承方式和优缺点。


  1. 工厂模式

1. 工厂模式

function createPerson(name) {
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };

  return o;
}

var person1 = createPerson('kevin');

缺点:对象无法识别,因为所有的实例都指向一个原型

1.原型链继承

function Parent () { this.name = ‘kevin’; } Parent.prototype.getName =
function () { console.log(this.name); } function Child () { }
Child.prototype = new Parent(); var child1 = new Child();
console.log(child1.getName()) // kevin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Parent () {
    this.name = ‘kevin’;
}
 
Parent.prototype.getName = function () {
    console.log(this.name);
}
 
function Child () {
 
}
 
Child.prototype = new Parent();
 
var child1 = new Child();
 
console.log(child1.getName()) // kevin

问题:

1.引用类型的属性被所有实例共享,举个例子:

function Parent () { this.names = [‘kevin’, ‘daisy’]; } function Child
() { } Child.prototype = new Parent(); var child1 = new Child();
child1.names.push(‘yayu’); console.log(child1.names); // [“kevin”,
“daisy”, “yayu”] var child2 = new Child(); console.log(child2.names);
// [“kevin”, “daisy”, “yayu”]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Parent () {
    this.names = [‘kevin’, ‘daisy’];
}
 
function Child () {
 
}
 
Child.prototype = new Parent();
 
var child1 = new Child();
 
child1.names.push(‘yayu’);
 
console.log(child1.names); // ["kevin", "daisy", "yayu"]
 
var child2 = new Child();
 
console.log(child2.names); // ["kevin", "daisy", "yayu"]

2.在创建 Child 的实例时,不能向Parent传参

注意:

☞借用构造函数继承

原理:在子类型构造函数中调用超类型构造函数,由于函数本身就是可执行的代码块,因此这就和在子类型构造函数中直接设置属性和方法差不多。

优点:简单,可以在子类型中向父类型的构造函数传递参数
缺点:相同方法在不同对象的构造函数中都要定义一遍,无法实现函数复用。在超类型原型中定义的方法,对子类型是不可见的,因此所有的超类型的原型属性都不能被继承。

function createPerson(name) {

2. 构造函数模式

function Person(name) {
  this.name = name;
  this.getName = function () {
    console.log(this.name);
  };
}

var person1 = new Person('kevin');

优点:实例可以识别为一个特定的类型

缺点:每次创建实例时,每个方法都要被创建一次

2.借用构造函数(经典继承)

function Parent () { this.names = [‘kevin’, ‘daisy’]; } function Child
() { Parent.call(this); } var child1 = new Child();
child1.names.push(‘yayu’); console.log(child1.names); // [“kevin”,
“daisy”, “yayu”] var child2 = new Child(); console.log(child2.names);
// [“kevin”, “daisy”]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Parent () {
    this.names = [‘kevin’, ‘daisy’];
}
 
function Child () {
    Parent.call(this);
}
 
var child1 = new Child();
 
child1.names.push(‘yayu’);
 
console.log(child1.names); // ["kevin", "daisy", "yayu"]
 
var child2 = new Child();
 
console.log(child2.names); // ["kevin", "daisy"]

优点:

1.避免了引用类型的属性被所有实例共享

2.可以在 Child 中向 Parent 传参

举个例子:

function Parent (name) { this.name = name; } function Child (name) {
Parent.call(this, name); } var child1 = new Child(‘kevin’);
console.log(child1.name); // kevin var child2 = new Child(‘daisy’);
console.log(child2.name); // daisy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Parent (name) {
    this.name = name;
}
 
function Child (name) {
    Parent.call(this, name);
}
 
var child1 = new Child(‘kevin’);
 
console.log(child1.name); // kevin
 
var child2 = new Child(‘daisy’);
 
console.log(child2.name); // daisy

缺点:

方法都在构造函数中定义,每次创建实例都会创建一遍方法。

跟《JavaScript深入之创建对象》一样,更像是笔记。

☞组合继承

原理:将原型链和借用构造函数的技术组合到一块,发挥二者之长的一种继承模式。

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
// Test Code
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 o = new Object();

2.1 构造函数模式优化

function Person(name) {
  this.name = name;
  this.getName = getName;
}

function getName() {
  console.log(this.name);
}

var person1 = new Person('kevin');

优点:解决了每个方法都要被重新创建的问题

缺点:这叫啥封装……

3.组合继承

原型链继承和经典继承双剑合璧。

function Parent (name) { this.name = name; this.colors = [‘red’,
‘blue’, ‘green’]; } Parent.prototype.getName = function () {
console.log(this.name) } function Child (name, age) { Parent.call(this,
name); this.age = age; } Child.prototype = new Parent(); var child1 =
new Child(‘kevin’, ’18’); child1.colors.push(‘black’);
console.log(child1.name); // kevin console.log(child1.age); // 18
console.log(child1.colors); // [“red”, “blue”, “green”, “black”] var
child2 = new Child(‘daisy’, ’20’); console.log(child2.name); // daisy
console.log(child2.age); // 20 console.log(child2.colors); // [“red”,
“blue”, “green”]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function Parent (name) {
    this.name = name;
    this.colors = [‘red’, ‘blue’, ‘green’];
}
 
Parent.prototype.getName = function () {
    console.log(this.name)
}
 
function Child (name, age) {
 
    Parent.call(this, name);
    
    this.age = age;
 
}
 
Child.prototype = new Parent();
 
var child1 = new Child(‘kevin’, ’18’);
 
child1.colors.push(‘black’);
 
console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]
 
var child2 = new Child(‘daisy’, ’20’);
 
console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

优点:融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。

哎,再让我感叹一句:《JavaScript高级程序设计》写得真是太好了!

☞寄生组合式继承

原理:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat);
Cat.prototype.constructor = Cat; //修复构造函数

非常完美的实现了对象的继承

    o.name = name;

3. 原型模式

function Person(name) {

}

Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
  console.log(this.name);
};

var person1 = new Person();

优点:方法不会重新创建

缺点:1. 所有的属性和方法都共享 2. 不能初始化参数

4.原型式继承

function createObj(o) { function F(){} F.prototype = o; return new F();
}

1
2
3
4
5
function createObj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

就是 ES5 Object.create 的模拟实现,将传入的对象作为创建的对象的原型。

缺点:

包含引用类型的属性值始终都会共享相应的值,这点跟原型链继承一样。

var person = { name: ‘kevin’, friends: [‘daisy’, ‘kelly’] } var
person1 = createObj(person); var person2 = createObj(person);
person1.name = ‘person1’; console.log(person2.name); // kevin
person1.firends.push(‘taylor’); console.log(person2.friends); //
[“daisy”, “kelly”, “taylor”]

1
2
3
4
5
6
7
8
9
10
11
12
13
var person = {
    name: ‘kevin’,
    friends: [‘daisy’, ‘kelly’]
}
 
var person1 = createObj(person);
var person2 = createObj(person);
 
person1.name = ‘person1’;
console.log(person2.name); // kevin
 
person1.firends.push(‘taylor’);
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

注意:修改person1.name的值,person2.name的值并未发生改变,并不是因为person1person2有独立的
name 值,而是因为person1.name = 'person1',给person1添加了 name
值,并非修改了原型上的 name 值。

1.原型链继承

    o.getName = function () {

3.1 原型模式优化

function Person(name) {

}

Person.prototype = {
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

优点:封装性好了一点

缺点:重写了原型,丢失了constructor属性

5. 寄生式继承

创建一个仅用于封装继承过程的函数,该函数在内部以某种形式来做增强对象,最后返回对象。

function createObj (o) { var clone = object.create(o); clone.sayName =
function () { console.log(‘hi’); } return clone; }

1
2
3
4
5
6
7
function createObj (o) {
    var clone = object.create(o);
    clone.sayName = function () {
        console.log(‘hi’);
    }
    return clone;
}

缺点:跟借用构造函数模式一样,每次创建对象都会创建一遍方法。

function Parent () {
  this.name = 'kevin';
}

Parent.prototype.getName = function () {
  console.log(this.name);
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // kevin

        console.log(this.name);

3.2 原型模式优化

function Person(name) {

}

Person.prototype = {
  constructor: Person,
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

优点:实例可以通过constructor属性找到所属构造函数

缺点:原型模式该有的缺点还是有

奥门威尼斯网址 ,6. 寄生组合式继承

为了方便大家阅读,在这里重复一下组合继承的代码:

function Parent (name) { this.name = name; this.colors = [‘red’,
‘blue’, ‘green’]; } Parent.prototype.getName = function () {
console.log(this.name) } function Child (name, age) { Parent.call(this,
name); this.age = age; } Child.prototype = new Parent(); var child1 =
new Child(‘kevin’, ’18’); console.log(child1)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Parent (name) {
    this.name = name;
    this.colors = [‘red’, ‘blue’, ‘green’];
}
 
Parent.prototype.getName = function () {
    console.log(this.name)
}
 
function Child (name, age) {
    Parent.call(this, name);
    this.age = age;
}
 
Child.prototype = new Parent();
 
var child1 = new Child(‘kevin’, ’18’);
 
console.log(child1)

组合继承最大的缺点是会调用两次父构造函数。

一次是设置子类型实例的原型的时候:

Child.prototype = new Parent();

1
Child.prototype = new Parent();

一次在创建子类型实例的时候:

var child1 = new Child(‘kevin’, ’18’);

1
var child1 = new Child(‘kevin’, ’18’);

回想下 new 的模拟实现,其实在这句中,我们会执行:

Parent.call(this, name);

1
Parent.call(this, name);

在这里,我们又会调用了一次 Parent 构造函数。

所以,在这个例子中,如果我们打印 child1 对象,我们会发现 Child.prototype
和 child1 都有一个属性为colors,属性值为['red', 'blue', 'green']

那么我们该如何精益求精,避免这一次重复调用呢?

如果我们不使用 Child.prototype = new Parent() ,而是间接的让
Child.prototype 访问到 Parent.prototype 呢?

看看如何实现:

function Parent (name) { this.name = name; this.colors = [‘red’,
‘blue’, ‘green’]; } Parent.prototype.getName = function () {
console.log(this.name) } function Child (name, age) { Parent.call(this,
name); this.age = age; } // 关键的三步 var F = function () {};
F.prototype = Parent.prototype; Child.prototype = new F(); var child1 =
new Child(‘kevin’, ’18’); console.log(child1);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function Parent (name) {
    this.name = name;
    this.colors = [‘red’, ‘blue’, ‘green’];
}
 
Parent.prototype.getName = function () {
    console.log(this.name)
}
 
function Child (name, age) {
    Parent.call(this, name);
    this.age = age;
}
 
// 关键的三步
var F = function () {};
 
F.prototype = Parent.prototype;
 
Child.prototype = new F();
 
 
var child1 = new Child(‘kevin’, ’18’);
 
console.log(child1);

最后我们封装一下这个继承方法:

function object(o) { function F() {} F.prototype = o; return new F(); }
function prototype(child, parent) { var prototype =
object(parent.prototype); prototype.constructor = child; child.prototype
= prototype; } // 当我们使用的时候: prototype(Child, Parent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
 
function prototype(child, parent) {
    var prototype = object(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}
 
// 当我们使用的时候:
prototype(Child, Parent);

引用《JavaScript高级程序设计》中对寄生组合式继承的夸赞就是:

这种方式的高效率体现它只调用了一次 Parent 构造函数,并且因此避免了在
Parent.prototype
上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用
instanceof 和
isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

问题:

    };

4. 组合模式

构造函数模式与原型模式双剑合璧。

function Person(name) {
  this.name = name;
}

Person.prototype = {
  constructor: Person,
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

优点:该共享的共享,该私有的私有,使用最广泛的方式

缺点:有的人就是希望全部都写在一起,即更好的封装性

深入系列

JavaScript深入系列目录地址:。

JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎star,对作者也是一种鼓励。

  1. JavaScirpt 深入之从原型到原型链
  2. JavaScript
    深入之词法作用域和动态作用域
  3. JavaScript 深入之执行上下文栈
  4. JavaScript 深入之变量对象
  5. JavaScript 深入之作用域链
  6. JavaScript 深入之从 ECMAScript 规范解读
    this
  7. JavaScript 深入之执行上下文
  8. JavaScript 深入之闭包
  9. JavaScript 深入之参数按值传递
  10. JavaScript
    深入之call和apply的模拟实现
  11. JavaScript 深入之bind的模拟实现
  12. JavaScript 深入之new的模拟实现
  13. JavaScript 深入之类数组对象与
    arguments
  14. JavaScript
    深入之创建对象的多种方式以及优缺点

    1 赞 3 收藏
    评论

奥门威尼斯网址 1

1.引用类型的属性被所有实例共享,举个例子:

    return o;

4.1 动态原型模式

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype.getName = function () {
      console.log(this.name);
    }
  }
}

var person1 = new Person();

注意:使用动态原型模式时,不能用对象字面量重写原型

解释下为什么:

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
  }
}

var person1 = new Person('kevin');
var person2 = new Person('daisy');

// 报错 并没有该方法
person1.getName();

// 注释掉上面的代码,这句是可以执行的。
person2.getName();

为了解释这个问题,假设开始执行var person1 = new Person('kevin')

如果对 new 和 apply
的底层执行过程不是很熟悉,可以阅读底部相关链接中的文章。

我们回顾下 new 的实现步骤:

  1. 首先新建一个对象
  2. 然后将对象的原型指向 Person.prototype
  3. 然后 Person.apply(obj)
  4. 返回这个对象

注意这个时候,回顾下 apply 的实现步骤,会执行 obj.Person
方法,这个时候就会执行 if 语句里的内容,注意构造函数的 prototype
属性指向了实例的原型,使用字面量方式直接覆盖
Person.prototype,并不会更改实例的原型的值,person1
依然是指向了以前的原型,而不是 Person.prototype。而之前的原型是没有
getName 方法的,所以就报错了!

如果你就是想用字面量方式写代码,可以尝试下这种:

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }

    return new Person(name);
  }
}

var person1 = new Person('kevin');
var person2 = new Person('daisy');

person1.getName(); // kevin
person2.getName();  // daisy
function Parent () {
  this.names = ['kevin', 'daisy'];
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy", "yayu"]

}

5.1 寄生构造函数模式

function Person(name) {

  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };

  return o;

}

var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object)  // true

寄生构造函数模式,我个人认为应该这样读:

寄生-构造函数-模式,也就是说寄生在构造函数的一种方法。

也就是说打着构造函数的幌子挂羊头卖狗肉,你看创建的实例使用 instanceof
都无法指向构造函数!

这样方法可以在特殊情况下使用。比如我们想创建一个具有额外方法的特殊数组,但是又不想直接修改Array构造函数,我们可以这样写:

function SpecialArray() {
  var values = new Array();

  for (var i = 0, len = arguments.length; i < len; i++) {
    values.push(arguments[i]);
  }

  values.toPipedString = function () {
    return this.join("|");
  };
  return values;
}

var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');


console.log(colors);
console.log(colors.toPipedString()); // red|blue|green

console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

你会发现,其实所谓的寄生构造函数模式就是比工厂模式在创建对象的时候,多使用了一个new,实际上两者的结果是一样的。

但是作者可能是希望能像使用普通 Array 一样使用 SpecialArray,虽然把
SpecialArray 当成函数也一样能用,但是这并不是作者的本意,也变得不优雅。

在可以使用其他模式的情况下,不要使用这种模式。

但是值得一提的是,上面例子中的循环:

for (var i = 0, len = arguments.length; i < len; i++) {
  values.push(arguments[i]);
}

可以替换成:

values.push.apply(values, arguments);

2.在创建 Child 的实例时,不能向Parent传参

var person1 = createPerson(‘kevin’);

5.2 稳妥构造函数模式

function person(name){
  var o = new Object();
  o.sayName = function(){
    console.log(name);
  };
  return o;
}

var person1 = person('kevin');

person1.sayName(); // kevin

person1.name = "daisy";

person1.sayName(); // kevin

console.log(person1.name); // daisy

所谓稳妥对象,指的是没有公共属性,而且其方法也不引用 this 的对象。

与寄生构造函数模式有两点不同:

  1. 新创建的实例方法不引用 this
  2. 不使用 new 操作符调用构造函数

稳妥对象最适合在一些安全的环境中。

稳妥构造函数模式也跟工厂模式一样,无法识别对象所属类型。

原文:

2.借用构造函数(经典继承)

缺点:对象无法识别,因为所有的实例都指向一个原型

function Parent () {
  this.names = ['kevin', 'daisy'];
}

function Child () {
  Parent.call(this);
}

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy"]
  1. 构造函数模式

优点:

function Person(name) {

1.避免了引用类型的属性被所有实例共享

    this.name = name;

2.可以在 Child 中向 Parent 传参

    this.getName = function () {

举个例子:

        console.log(this.name);

function Parent (name) {
  this.name = name;
}

function Child (name) {
  Parent.call(this, name);
}

var child1 = new Child('kevin');

console.log(child1.name); // kevin

var child2 = new Child('daisy');

console.log(child2.name); // daisy

    };

缺点:

}

方法都在构造函数中定义,每次创建实例都会创建一遍方法。

var person1 = new Person(‘kevin’);

3.组合继承

优点:实例可以识别为一个特定的类型

原型链继承和经典继承双剑合璧。

缺点:每次创建实例时,每个方法都要被创建一次

function Parent (name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
  console.log(this.name)
}

function Child (name, age) {

  Parent.call(this, name);

  this.age = age;

}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

child1.colors.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

2.1 构造函数模式优化

优点:融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。

function Person(name) {

4.原型式继承

    this.name = name;

function createObj(o) {
  function F(){}
  F.prototype = o;
  return new F();
}

    this.getName = getName;

就是 ES5 Object.create 的模拟实现,将传入的对象作为创建的对象的原型。

}

缺点:

function getName() {

包含引用类型的属性值始终都会共享相应的值,这点跟原型链继承一样。

    console.log(this.name);

var person = {
  name: 'kevin',
  friends: ['daisy', 'kelly']
}

var person1 = createObj(person);
var person2 = createObj(person);

person1.name = 'person1';
console.log(person2.name); // kevin

person1.firends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

}

注意:修改person1.name的值,person2.name的值并未发生改变,并不是因为person1person2有独立的
name 值,而是因为person1.name = 'person1',给person1添加了 name
值,并非修改了原型上的 name 值。

var person1 = new Person(‘kevin’);

5. 寄生式继承

优点:解决了每个方法都要被重新创建的问题

创建一个仅用于封装继承过程的函数,该函数在内部以某种形式来做增强对象,最后返回对象。

缺点:这叫啥封装……

function createObj (o) {
  var clone = object.create(o);
  clone.sayName = function () {
    console.log('hi');
  }
  return clone;
}
  1. 原型模式

缺点:跟借用构造函数模式一样,每次创建对象都会创建一遍方法。

function Person(name) {

6. 寄生组合式继承

}

为了方便大家阅读,在这里重复一下组合继承的代码:

Person.prototype.name = ‘keivn’;

function Parent (name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
  console.log(this.name)
}

function Child (name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

console.log(child1)

Person.prototype.getName = function () {

组合继承最大的缺点是会调用两次父构造函数。

    console.log(this.name);

一次是设置子类型实例的原型的时候:

};

Child.prototype = new Parent();

var person1 = new Person();

一次在创建子类型实例的时候:

优点:方法不会重新创建

var child1 = new Child('kevin', '18');

缺点:1. 所有的属性和方法都共享 2. 不能初始化参数

回想下 new 的模拟实现,其实在这句中,我们会执行:

3.1 原型模式优化

Parent.call(this, name);

function Person(name) {

在这里,我们又会调用了一次 Parent 构造函数。

}

所以,在这个例子中,如果我们打印 child1 对象,我们会发现 Child.prototype
和 child1 都有一个属性为colors,属性值为[‘red’, ‘blue’, ‘green’]。

Person.prototype = {

那么我们该如何精益求精,避免这一次重复调用呢?

    name: ‘kevin’,

如果我们不使用 Child.prototype = new Parent() ,而是间接的让
Child.prototype 访问到 Parent.prototype 呢?

    getName: function () {

看看如何实现:

        console.log(this.name);

function Parent (name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
  console.log(this.name)
}

function Child (name, age) {
  Parent.call(this, name);
  this.age = age;
}

// 关键的三步
var F = function () {};

F.prototype = Parent.prototype;

Child.prototype = new F();


var child1 = new Child('kevin', '18');

console.log(child1);

    }

最后我们封装一下这个继承方法:

};

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

function prototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

// 当我们使用的时候:
prototype(Child, Parent);

var person1 = new Person();

引用《JavaScript高级程序设计》中对寄生组合式继承的夸赞就是:

var person1 = new Person();

这种方式的高效率体现它只调用了一次Parent构造函数,并且因此避免了在
Parent.prototype
上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用
instanceof 和
isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

优点:封装性好了一点

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

缺点:重写了原型,丢失了constructor属性

您可能感兴趣的文章:

  • 简单的JS多重继承示例
  • JavaScript
    mixin实现多继承的方法详解
  • JS
    面向对象之继承—多种组合继承详解
  • 谈一谈javascript中继承的多种方式
  • ExtJS4中使用mixins实现多继承示例
  • 用JavaScript实现单继承和多继承的简单方法
  • Javascript基于对象三大特性(封装性、继承性、多态性)
  • js中实现多态采用和继承类似的方法
  • javascript
    面向对象全新理练之继承与多态
  • JavaScript实现多重继承的方法分析

3.2 原型模式优化

function Person(name) {

}

Person.prototype = {

    constructor: Person,

    name: ‘kevin’,

    getName: function () {

        console.log(this.name);

    }

};

var person1 = new Person();

优点:实例可以通过constructor属性找到所属构造函数

缺点:原型模式该有的缺点还是有

  1. 组合模式

构造函数模式与原型模式双剑合璧。

function Person(name) {

    this.name = name;

}

Person.prototype = {

    constructor: Person,

    getName: function () {

        console.log(this.name);

    }

};

var person1 = new Person();

优点:该共享的共享,该私有的私有,使用最广泛的方式

缺点:有的人就是希望全部都写在一起,即更好的封装性

4.1 动态原型模式

function Person(name) {

    this.name = name;

    if (typeof this.getName != “function”) {

        Person.prototype.getName = function () {

            console.log(this.name);

        }

    }

}

var person1 = new Person();

注意:使用动态原型模式时,不能用对象字面量重写原型

解释下为什么:

function Person(name) {

    this.name = name;

    if (typeof this.getName != “function”) {

        Person.prototype = {

            constructor: Person,

            getName: function () {

                console.log(this.name);

            }

        }

    }

}

var person1 = new Person(‘kevin’);

var person2 = new Person(‘daisy’);

// 报错 并没有该方法

person1.getName();

// 注释掉上面的代码,这句是可以执行的。

person2.getName();

为了解释这个问题,假设开始执行var person1 = new Person(‘kevin’)。

如果对 new 和 apply
的底层执行过程不是很熟悉,可以阅读底部相关链接中的文章。

我们回顾下 new 的实现步骤:

首先新建一个对象

然后将对象的原型指向 Person.prototype

然后 Person.apply(obj)

返回这个对象

注意这个时候,回顾下 apply 的实现步骤,会执行 obj.Person
方法,这个时候就会执行 if 语句里的内容,注意构造函数的 prototype
属性指向了实例的原型,使用字面量方式直接覆盖
Person.prototype,并不会更改实例的原型的值,person1
依然是指向了以前的原型,而不是 Person.prototype。而之前的原型是没有
getName 方法的,所以就报错了!

如果你就是想用字面量方式写代码,可以尝试下这种:

function Person(name) {

    this.name = name;

    if (typeof this.getName != “function”) {

        Person.prototype = {

            constructor: Person,

            getName: function () {

                console.log(this.name);

            }

        }

        return new Person(name);

    }

}

var person1 = new Person(‘kevin’);

var person2 = new Person(‘daisy’);

person1.getName(); // kevin

person2.getName();  // daisy

5.1 寄生构造函数模式

function Person(name) {

    var o = new Object();

    o.name = name;

    o.getName = function () {

        console.log(this.name);

    };

    return o;

}

var person1 = new Person(‘kevin’);

console.log(person1 instanceof Person) // false

console.log(person1 instanceof Object)  // true

寄生构造函数模式,我个人认为应该这样读:

寄生-构造函数-模式,也就是说寄生在构造函数的一种方法。

也就是说打着构造函数的幌子挂羊头卖狗肉,你看创建的实例使用 instanceof
都无法指向构造函数!

这样方法可以在特殊情况下使用。比如我们想创建一个具有额外方法的特殊数组,但是又不想直接修改Array构造函数,我们可以这样写:

function SpecialArray() {

    var values = new Array();

    for (var i = 0, len = arguments.length; i < len; i++) {

        values.push(arguments[i]);

    }

    values.toPipedString = function () {

        return this.join(“|”);

    };

    return values;

}

var colors = new SpecialArray(‘red’, ‘blue’, ‘green’);

var colors2 = SpecialArray(‘red2’, ‘blue2’, ‘green2’);

console.log(colors);

console.log(colors.toPipedString()); // red|blue|green

console.log(colors2);

console.log(colors2.toPipedString()); // red2|blue2|green2

你会发现,其实所谓的寄生构造函数模式就是比工厂模式在创建对象的时候,多使用了一个new,实际上两者的结果是一样的。

但是作者可能是希望能像使用普通 Array 一样使用 SpecialArray,虽然把
SpecialArray 当成函数也一样能用,但是这并不是作者的本意,也变得不优雅。

在可以使用其他模式的情况下,不要使用这种模式。

但是值得一提的是,上面例子中的循环:

for (var i = 0, len = arguments.length; i < len; i++) {

    values.push(arguments[i]);

}

可以替换成:

values.push.apply(values, arguments);

5.2 稳妥构造函数模式

function person(name){

    var o = new Object();

    o.sayName = function(){

        console.log(name);

    };

    return o;

}

var person1 = person(‘kevin’);

person1.sayName(); // kevin

person1.name = “daisy”;

person1.sayName(); // kevin

console.log(person1.name); // daisy

所谓稳妥对象,指的是没有公共属性,而且其方法也不引用 this 的对象。

与寄生构造函数模式有两点不同:

新创建的实例方法不引用 this

不使用 new 操作符调用构造函数

稳妥对象最适合在一些安全的环境中。

稳妥构造函数模式也跟工厂模式一样,无法识别对象所属类型。

发表评论

电子邮件地址不会被公开。 必填项已用*标注