JavaScript - 原型继承机制

转载博客：https://www.cnblogs.com/ZengYunChun/p/5818081.html

你必须完全理解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的属性，然后再读取该属性，因为找不到该属性，原型链将被查询。