JavaScript 原型继承机制

转载：理解AngularJS的作用域Scope

你必须完全理解JavaScript的原型继承机制，尤其是当你有后端开发背景和类继承经验的时候。所以我们先来回顾一下原型继承：

假设父作用域

parentScope

拥有以下属性和方法：

aString

、

aNumber

、

anArray

、

anObject

、

aFunction

。子作用域

childScope

如果从父作用域

parentScope

进行原型继承，我们将看到：



(注：为节约空间，anArray使用了蓝色方块图)

如果我们在子作用域中访问一个父作用域中定义的属性，JavaScript首先在子作用域中寻找该属性，没找到再从原型链上的父作用域中寻找，如果还没找到会再往上一级原型链的父作用域寻找。在AngularJS中，作用域原型链的顶端是

$rootScope

，JavaScript寻找到

$rootScope

为止。所以，以下表达式均为

true

：

childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'

如果我们进行如下操作:

childScope.aString = 'child string'

因为我们赋值目标是子作用域的属性，原型链将不会被查询，一个新的与父作用域中属性同名的属性

aString

将被添加到当前的子作用域

childScope

中。



如果我们进行如下操作:

childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'

因为我们的赋值目标是子作用域属性

anArray

和

anObject

的子属性，也就是说JavaScript必须先要先寻找

anArray

和

anObject

这两个对象——它们必须为对象，否则不能写入属性，而这两个对象不在当前子作用域，原型链将被查询，在父作用域中找到这两个对象，
然后对这两个对象的属性

[1]

和

property1

进行赋值操作。子作用域中不会创建两个新的同名属性！（注意JavaScript中数组和函数均是对象——引用类型）



如果我们进行如下操作:

childScope.anArray = [100, 555]
childScope.anObject = { name: 'Mark', country: 'USA' }

同样因为我们赋值目标是子作用域的属性，原型链将不会被查询，，JavaScript会直接在子作用域创建两个同名属性，其值分别为数组和对象。



要点:
如果我们读取

childScope.propertyX

，并且

childScope

存在

propertyX

，原型链不会被查询；
如果我们写入

childScope.propertyX

,
原型链也不会被查询；
如果我们写入

childScope.propertyX.subPropertyY

,
并且

childScope

不存在

propertyX

，原型链将被查询——查找

propertyX

。

最后一点:

delete childScope.anArray
childScope.anArray[1] === 22  // true

如果我们先删除了子作用域childScope的属性，然后再读取该属性，因为找不到该属性，原型链将被查询。