typeof null 是 object 而 typeof undefined 是 undefined 吗。

继承的实现方式及原型概述

2015/07/15 · JavaScript
· 原型,
继承

原文出处: 名一的博客   

对于 OO 语言,有一句话叫“Everything is object”,虽然 JavaScript
不是严格意义上的面向对象语言,但如果想要理解 JS
中的继承,这句话必须时刻铭记于心。

JS
的语法非常灵活,所以有人觉得它简单,因为怎么写都是对的;也有人觉得它难,因为很难解释某些语法的设计,谁能告诉我为什么
typeof null 是 object 而 typeof undefined 是 undefined 吗?并且这是在
null == undefined
的前提下。很多我们自认为“懂”了的知识点,细细琢磨起来,还是会发现有很多盲点,“无畏源于无知”吧……

1. 简单对象

既然是讲继承,自然是从最简单的对象说起:

JavaScript

var dog = { name: ‘tom’ }

1
2
3
var dog = {
  name: ‘tom’
}

这便是对象直接量了。每一个对象直接量都是 Object 的子类,即

JavaScript

dog instanceof Object; // true

1
dog instanceof Object; // true

2. 构造函数

JS 中的构造函数与普通函数并没有什么两样,只不过在调用时,前面加上了 new
关键字,就当成是构造函数了。

JavaScript

function Dog(name) { this.name = name; } var dog = new Dog(‘tom’); dog
instanceof Dog; // true

1
2
3
4
5
6
7
function Dog(name) {
  this.name = name;
}
 
var dog = new Dog(‘tom’);
 
dog instanceof Dog; // true

两个问题,第一,不加 new 关键字有什么后果?

那么 Dog 函数中的 this
在上下文(Context)中被解释为全局变量,具体在浏览器端的话是 window
对象,在 node 环境下是一个 global 对象。

第二,dog 的值是什么?很简单,undefined 。Dog
函数没有返回任何值,执行结束后,dog 的值自然是 undefined 。

关于 new
的过程,这里也顺便介绍一下,这个对后面理解原型(prototype)有很大的帮助:

  1. 创建一个空的对象,仅包含 Object 的属性和方法。
  2. 将 prototype 中的属性和方法创建一份引用,赋给新对象。
  3. 将 this 上的属性和方法新建一份,赋给新对象。
  4. 返回 this 对象,忽略 return 语句。

需要明确的是,prototype 上的属性和方法是实例间共享的,this
上的属性和方法是每个实例独有的。

3. 引入 prototype

现在为 Dog 函数加上 prototype,看一个例子:

JavaScript

function Dog(name) { this.name = name; this.bark = function() {}; }
Dog.prototype.jump = function() {}; Dog.prototype.species = ‘Labrador’;
Dog.prototype.teeth = [‘1’, ‘2’, ‘3’, ‘4’]; var dog1 = new Dog(‘tom’),
dog2 = new Dog(‘jerry’); dog1.bark !== dog2.bark; // true dog1.jump ===
dog2.jump; // true dog1.teeth.push(‘5’); dog2.teeth; // [‘1’, ‘2’, ‘3’,
‘4’, ‘5’]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Dog(name) {
  this.name = name;
  this.bark = function() {};
}
 
Dog.prototype.jump = function() {};
Dog.prototype.species = ‘Labrador’;
Dog.prototype.teeth = [‘1’, ‘2’, ‘3’, ‘4’];
 
var dog1 = new Dog(‘tom’),
    dog2 = new Dog(‘jerry’);
 
dog1.bark !== dog2.bark; // true
dog1.jump === dog2.jump; // true
 
dog1.teeth.push(‘5’);
dog2.teeth; // [‘1’, ‘2’, ‘3’, ‘4’, ‘5’]

看到有注释的那三行应该可以明白“引用”和“新建”的区别了。

那么我们经常说到的“原型链”到底是什么呢?这个术语出现在继承当中,它用于表示对象实例中的属性和方法来自于何处(哪个父类)。好吧,这是笔者的解释。

JavaScript

– Object bark: Dog/this.bark() name: ‘tom’ – __proto__: Object
jump: Dog.prototype.jump() species: ‘Labrador’ + teeth: Array[4] +
constructor: Dog() + __proto__: Object

1
2
3
4
5
6
7
8
9
– Object
  bark: Dog/this.bark()
  name: ‘tom’
– __proto__: Object
    jump: Dog.prototype.jump()
    species: ‘Labrador’
  + teeth: Array[4]
  + constructor: Dog()
  + __proto__: Object  

上面的是 dog1 的原型链,不知道够不够直观地描述“链”这个概念。

  1. 其中,bark 和 name 是定义在 this 中的,所以最顶层可以看到它俩。
  2. 然后,每一个对象都会有一个 __proto__ 属性(IE
    11+),它表示定义在原型上的属性和方法,所以 jump、species 和 teeth
    自然就在这儿了。
  3. 最后就一直向上找 __proto__ 中的属性和方法。

  4. 继承的几种实现


4.1 通过 call 或者 apply

继承在编程中有两种说法,一个叫 inherit,另一个是 extend
。前者是严格意义上的继承,即存在父子关系,而后者仅仅是一个类扩展了另一个类的属性和方法。那么
call 和 apply 就属于后者的范畴。怎么说?

JavaScript

function Animal(gender) { this.gender = gender; } function Dog(name,
gender) { Animal.call(this, gender); this.name = name; } var dog = new
Dog(‘tom’, ‘male’); dog instanceof Animal; // false

1
2
3
4
5
6
7
8
9
10
11
12
function Animal(gender) {
  this.gender = gender;
}
 
function Dog(name, gender) {
  Animal.call(this, gender);
  this.name = name;
}
 
var dog = new Dog(‘tom’, ‘male’);
 
dog instanceof Animal; // false

虽然在 dog 对象中有 gender 属性,但 dog 却不是 Animal
类型。甚至,这种方式只能“继承”父类在 this 上定义的属性和方法,并不能继承
Animal.prototype 中的属性和方法。

4.2 通过 prototype 实现继承

要实现继承,必须包含“原型”的概念。下面是很常用的继承方式。

JavaScript

function Dog(name) { Animal.call(this); } Dog.prototype = new Animal();
// 先假设 Animal 函数没有参数 Dog.prototype.constructor = Dog; var dog =
new Dog(‘tom’); dog instanceof Animal; // true

1
2
3
4
5
6
7
8
9
10
function Dog(name) {
  Animal.call(this);
}
 
Dog.prototype = new Animal(); // 先假设 Animal 函数没有参数
Dog.prototype.constructor = Dog;
 
var dog = new Dog(‘tom’);
 
dog instanceof Animal; // true

继承的结果有两个:一、获得父类的属性和方法;二、正确通过 instanceof
的测试。

prototype 也是对象,它是创建实例时的装配机,这个在前面有提过。new
Animal() 的值包含 Animal 实例所有的属性和方法,既然它赋给了 Dog 的
prototype,那么 Dog 的实例自然就获得了父类的所有属性和方法。

并且,通过这个例子可以知道,改变 Dog 的 prototype 属性可以改变
instanceof 的测试结果,也就是改变了父类。

然后,为什么要在 Dog 的构造函数中调用 Animal.call(this)?

因为 Animal 中可能在 this
上定义了方法和函数,如果没有这句话,那么所有的这一切都会给到 Dog 的
prototype 上,根据前面的知识我们知道,prototype
中的属性和方法在实例间是共享的。

我们希望将这些属性和方法依然保留在实例自身的空间,而不是共享,因此需要重写一份。

至于为什么要修改
constructor,只能说是为了正确的显示原型链吧,它并不会影响 instanceof
的判断。或者有其他更深的道理我并不知道……

4.3 利用空对象实现继承

上面的继承方式已经近乎完美了,除了两点:

一、Animal 有构造参数,并且使用了这些参数怎么办?
二、在 Dog.prototype 中多了一份定义在 Animal 实例中冗余的属性和方法。

JavaScript

function Animal(name) { name.doSomething(); } function Dog(name) {
Animal.call(this, name); } Dog.prototype = new Animal(); //
由于没有传入name变量,在调用Animal的构造函数时,会出错
Dog.prototype.constructor = Dog;

1
2
3
4
5
6
7
8
9
10
function Animal(name) {
  name.doSomething();
}
 
function Dog(name) {
  Animal.call(this, name);
}
 
Dog.prototype = new Animal(); // 由于没有传入name变量,在调用Animal的构造函数时,会出错
Dog.prototype.constructor = Dog;

这个问题可以通过一个空对象来解决(改自 Douglas Crockford)。

JavaScript

function DummyAnimal() {} DummyAnimal.prototype = Animal.prototype;
Dog.prototype = new DummyAnimal(); Dog.prototype.constructor = Dog;

1
2
3
4
5
function DummyAnimal() {}
DummyAnimal.prototype = Animal.prototype;
 
Dog.prototype = new DummyAnimal();
Dog.prototype.constructor = Dog;

他的原始方法是下面的 object:

JavaScript

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

1
2
3
4
5
6
7
8
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
 
Dog.prototype = object(Animal.prototype);
Dog.prototype.constructor = Dog;

4.4 利用 __proto__ 实现继承

现在就只剩下一个问题了,如何把冗余属性和方法去掉?

其实,从第 3 小节介绍原型的时候就提到了 __proto__ 属性,instanceof
运算符是通过它来判断是否属于某个类型的。

所以我们可以这么继承:

JavaScript

function Dog() { Animal.call(this); } Dog.prototype = { __proto__:
Animal.prototype, constructor: Dog };

1
2
3
4
5
6
7
8
function Dog() {
  Animal.call(this);
}
 
Dog.prototype = {
  __proto__: Animal.prototype,
  constructor: Dog
};

如果不考虑兼容性的话,这应该是从 OO 的角度来看最贴切的继承方式了。

4.5 拷贝威尼斯赌场手机版本继承

这个方式也只能称之为 extend 而不是 inherit,所以也没必要展开说。

像 Backbone.Model.extend、jQuery.extend 或者 _.extend
都是拷贝继承,可以稍微看一下它们是怎么实现的。(或者等我自己再好好研究之后过来把这部分补上吧)

5. 个人小结

当我们在讨论继承的实现方式时,给我的感觉就像孔乙己在炫耀“茴香豆”的“茴”有几种写法一样。继承是
JS
中占比很大的一块内容,所以很多库都有自己的实现方式,它们并没有使用我认为的“最贴切”的方法,为什么?JS
就是 JS,它生来就设计得非常灵活,所以我们为什么不利用这个特性,而非得将
OO 的做法强加于它呢?

通过继承,我们更多的是希望获得父类的属性和方法,至于是否要保证严格的父类/子类关系,很多时候并不在乎,而拷贝继承最能体现这一点。对于基于原型的继承,会在代码中看到各种用
function
定义的类型,而拷贝继承更通用,它只是将一个对象的属性和方法拷贝(扩展)到另一个对象而已,并不关心原型链是什么。

当然,在我鼓吹拷贝继承多么多么好时,基于原型的继承自然有它不可取代的理由。所以具体问题得具体分析,当具体的使用场景没定下来时,就不存在最好的方法。

个人见解,能帮助大家更加理解继承一点就最好,如果有什么不对的,请多多指教!

1 赞 4 收藏
评论

威尼斯赌场手机版本 1

发表评论

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