JavaScript - 原型继承机制

缺乏、安全感 2022-05-16 12:44 158阅读 0赞

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

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

假设父作用域`parentScope`拥有以下属性和方法：`aString`、`aNumber`、`anArray`、`anObject`、`aFunction`。子作用域`childScope`如果从父作用域`parentScope`进行原型继承，我们将看到：

![normal prototypal inheritance][]

(注：为节约空间，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`中。

![shadowing][]

如果我们进行如下操作:

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

因为我们的赋值目标是子作用域属性`anArray`和`anObject`的子属性，也就是说JavaScript必须先要先寻找`anArray`和`anObject`这两个对象——它们必须为对象，否则不能写入属性，而这两个对象不在当前子作用域，原型链将被查询，在父作用域中找到这两个对象， 然后对这两个对象的属性`[1]`和`property1`进行赋值操作。子作用域中不会不会创建两个新的同名属性！（注意JavaScript中数组和函数均是对象——引用类型）

![follow the chain][]

如果我们进行如下操作:

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

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

![not following the chain][]

要点:

*  如果我们读取`childScope.propertyX`，并且`childScope`存在`propertyX`，原型链不会被查询；
 *  如果我们写入`childScope.propertyX`, 原型链也不会被查询；
 *  如果我们写入`childScope.propertyX.subPropertyY`, 并且`childScope`不存在`propertyX`，原型链将被查询——查找`propertyX`。

最后一点:

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

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

![after deleting a property][]

[https_www.cnblogs.com_ZengYunChun_p_5818081.html]: https://www.cnblogs.com/ZengYunChun/p/5818081.html
[normal prototypal inheritance]: http://i.stack.imgur.com/aTAGg.png
[shadowing]: http://i.stack.imgur.com/OyVPW.png
[follow the chain]: http://i.stack.imgur.com/2QceU.png
[not following the chain]: http://i.stack.imgur.com/hKetH.png
[after deleting a property]: http://i.stack.imgur.com/56uoe.png