JS基础-函数、对象和原型、原型链的关系

JS的原型、原型链一直是比较难理解的内容，很多初学者甚至有必定经验的老鸟都不必定能彻底说清楚，更多的"极可能"是只知其一;不知其二，而这部份内容又是JS的核心内容，想要技术进阶的话确定不能对这个概念只知其一;不知其二，碰到问题靠“猜”，却不理解它的规则！

prototype

只有函数有prototype属性

let a = {}
let b = function () { }
console.log(a.prototype) // undefined
console.log(b.prototype) // { constructor: function(){...} }
复制代码

Object.prototype怎么解释？

其实Object是一个全局对象，也是一个构造函数，以及其余基本类型的全局对象也都是构造函数：

function outTypeName(data, type) {
    let typeName =  Object.prototype.toString.call(data)
    console.log(typeName)
}
outTypeName(Object) //[object Function]
outTypeName(String) // [object Function]
outTypeName(Number) // [object Function]
复制代码

为何只有函数有prototype属性

JS经过new来生成对象，可是仅靠构造函数，每次生成的对象都不同。

有时候须要在两个对象之间共享属性，因为JS在设计之初没有类的概念，因此JS使用函数的prototype来处理这部分须要被共享的属性，经过函数的prototype来模拟类：

当建立一个函数时，JS会自动为函数添加prototype属性，值是一个有constructor的对象。

如下是共享属性prototype的栗子：

function People(name) {
    this.name = name
}
People.prototype.age = 23 // 岁数
// 建立两个实例
let People1 = new People('OBKoro1')
let People2 = new People('扣肉')
People.prototype.age = 24 // 长大了一岁
console.log(People1.age, People2.age) // 24 24
复制代码

为何People1和People2能够访问到People.prototype.age？

缘由是：People1和People2的原型是People.prototype，答案在下方的：构造函数是什么以及它作了什么。

原型链

__proto__和Object.getPrototypeOf(target)： 对象的原型

__proto__是对象实例和它的构造函数之间创建的连接，它的值是：构造函数的`prototype。

也就是说：__proto__的值是它所对应的原型对象，是某个函数的prototype

Object.getPrototypeOf(target)全等于__proto__。

它是ES6的标准，兼容IE9，主流浏览器也都支持，MDN，本文将以Object.getPrototypeOf(target)指代__proto__。

不要再使用__proto__:

本段摘自阮一峰-ES6入门，具体解析请点击连接查看

1. __proto__属性没有写入 ES6 的正文，而是写入了附录。

2. 缘由是它本质上是一个内部属性，而不是一个正式的对外的 API，只是因为浏览器普遍支持，才被加入了 ES6。

3. 标准明确规定，只有浏览器必须部署这个属性，其余运行环境不必定须要部署，并且新的代码最好认为这个属性是不存在的。

4. 因此不管从语义的角度，仍是从兼容性的角度，都不要使用这个属性，应该使用：Object.getPrototypeOf(target)（读操做）、Object.setPrototypeOf(target)（写操做）、Object.create(target)（生成操做）代替

构造函数是什么、它作了什么

出自《你不知道的js》：在js中, 实际上并不存在所谓的'构造函数'，只有对于函数的'构造调用'。

上文一直提到构造函数，所谓的构造函数，实际上就是经过关键字new来调用的函数：

let newObj = new someFn() // 构造调用函数
复制代码

构造/new调用函数的时候作了什么：

1. 建立一个全新的对象。
2. 这个新对象的原型(Object.getPrototypeOf(target))指向构造函数的prototype对象。
3. 该函数的this会绑定在新建立的对象上。
4. 若是函数没有返回其余对象，那么new表达式中的函数调用会自动返回这个新对象。
5. 咱们称这个新对象为构造函数的实例。

原型继承就是利用构造调用函数的特性：

SubType.prototype = new SuperType();  // 原型继承：SubType继承SuperType
SubType.prototype.constructor = SubType // 从新指定constructor指向 方便找到构造函数
// 挂载SuperType的this和prototype的属性和方法到SubType.prototype上
复制代码

1. 构造调用的第二点：将新对象的Object.getPrototypeOf(target)指向函数的prototype
2. 构造调用的第三点：该函数的this会绑定在新建立的对象上。(因此父类this声明的属性被全部子类实例共享)
3. 新对象赋值给SubType.prototype

原型链是什么

来看个例子：

function foo() { }
const newObj = new foo() // 构造调用foo 返回一个新对象
const newObj__proto__ = Object.getPrototypeOf(newObj) // 获取newObj的原型对象
newObj__proto__ === foo.prototype // true 验证newObj的原型指向foo
const foo__proto__ = Object.getPrototypeOf(foo.prototype) // 获取foo.prototype的原型
foo__proto__ === Object.prototype // true foo.prototype的原型是Object.prototype
复制代码

若是用之前的语法，从newObj查找foo的原型，是这样的：

newObj.__proto__.__proto__ // 这种关系就是原型链
复制代码

能够用如下三句话来理解原型链：

1. 每一个对象都拥有一个原型对象: newObj的原型是foo.prototype。
2. 对象的原型可能也是继承其余原型对象的: foo.prototype也有它的原型Object.prototype。
3. 一层一层的，以此类推，这种关系就是原型链。

一个对象是否在另外一个对象的原型链上

若是一个对象存在另外一个对象的原型链上，咱们能够说：它们是继承关系。

判断方式有两种，但都是根据构造函数的prototype是否在原型链上来判断的：

1. instanceof: 用于测试构造函数的prototype属性是否出如今对象的原型链中的任何位置

语法：object instanceof constructor

let test = function () { }
let testObject = new test();
testObject instanceof test // true test.prototype在testObject的原型链上
 testObject instanceof Function // false Function.prototype 不在testObject的原型链上
testObject instanceof Object // true Object.prototype在testObject的原型链上
复制代码

2. isPrototypeOf：测试一个对象是否存在于另外一个对象的原型链上

语法：prototypeObj.isPrototypeOf(object)

let test = function () { }
let testObject = new test();
test.prototype.isPrototypeOf(testObject) // true test.prototype在testObject的原型链上
Object.prototype.isPrototypeOf(testObject) // true Object.prototype在testObject的原型链上
复制代码

原型链的终点: Object.prototype

Object.prototype是原型链的终点，全部对象都是从它继承了方法和属性。

Object.prototype没有原型对象：

const proto = Object.getPrototypeOf(Object.prototype) // null
复制代码

下面是两个验证例子，有疑虑的同窗多写几个测试用例印证一下。

字符串原型链的终点：Object.prototype

let test = '由String函数构造出来的'
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是String对象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String对象的原型是Object对象
复制代码

函数原型链的终点:Object.prototype

let test = function () { }
let fnPrototype = Object.getPrototypeOf(test)
fnPrototype === Function.prototype // true test的原型是Function.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype // true
复制代码

原型链用来作什么？

属性查找：

若是试图访问对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,而后才在该对象的原型(instance.prototype)里去找这个属性，以此类推

咱们用一个例子来形象说明一下：

let test = '由String函数构造出来的'
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是String对象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String对象的原型是Object对象
复制代码

当你访问test的某个属性时，浏览器会进行如下查找：

1. 浏览器首先查找test 自己
2. 接着查找它的原型对象：String.prototype
3. 最后查找String.prototype的原型对象：Object.prototype
4. 一旦在原型链上找到该属性，就会当即返回该属性，中止查找。
5. 原型链上的原型都没有找到的话，返回undefiend

这种查找机制还解释了字符串为什么会有自带的方法: slice/split/indexOf等。

准确的说：

• 这些属性和方法是定义在String这个全局对象/函数上的。
• 字符串的原型指向了String函数的prototype。
• 以后经过查找原型链，在String函数的prototype中找到这些属性和方法。

拒绝查找原型链：

hasOwnProperty: 指示对象自身属性中是否具备指定的属性

语法：obj.hasOwnProperty(prop)

参数: prop 要查找的属性

返回值: 用来判断某个对象是否含有指定的属性的Boolean。

let test ={ 'OBKoro1': '扣肉' }
test.hasOwnProperty('OBKoro1');  // true
test.hasOwnProperty('toString'); // false test自己没查找到toString 
复制代码

这个API是挂载在object.prototype上，全部对象均可以使用，API会忽略掉那些从原型链上继承到的属性。

扩展：

实例的属性

你知道构造函数的实例对象上有哪些属性吗？这些属性分别挂载在哪一个地方？缘由是什么？

function foo() {
    this.some = '222'
    let ccc = 'ccc'
    foo.obkoro1 = 'obkoro1'
    foo.prototype.a = 'aaa'
}
foo.koro = '扣肉'
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些属性,这些属性分别挂载在哪一个地方
foo.prototype.test = 'test2' // 从新赋值
复制代码

上面这道是考察JS基础的题，不少人都没说对，缘由是没有完全掌握this、原型链、函数。

想一下再看解析：

想一下再看解析：

想一下再看解析：

想一下再看解析：

想一下再看解析：

1. this.some：foo1对象的属性

经过构造调用foo的this指向foo1，因此this.some挂载在foo1对象下。

属性查找: foo1.some

foo1.some直接读取foo1的属性。

2. foo1.test、foo1.a：foo1对象的原型

根据上文提到的：构造/new调用函数的时候会建立一个新对象(foo1)，自动将foo1的原型(Object.getPrototypeOf(foo1))指向构造函数的prototype对象。

构造调用会执行函数，因此foo.prototype.a = 'aaaaa'也会执行，单就赋值这个层面来讲写在foo外面和写在foo里面是同样的。

属性查找：foo1.test、foo1.a

• foo1自己没有找到,继续查找
• foo1的原型Object.getPrototypeOf(foo1)上找到了a和test，返回它们，中止查找。

3. foo1.obkoro1和foo1.koro：返回undefined

静态属性: foo.obkoro1、foo.koro

函数在JS中是一等公民，它也是一个对象, 用来模拟类。

这两个属性跟foo1没有关系，它是对象foo上的两个属性(相似函数的:arguments/prototype/length等属性)，称为静态属性。

它们只能经过foo.obkoro1和foo.koro来访问。

原型对象改变，原型链下游获取的值也会改变

上面那个例子中的foo1.test的值是什么？

foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些属性,这些属性分别挂载在哪一个地方
foo.prototype.test = 'test2' // 从新赋值
复制代码

foo1.test的值是test2，缘由是：foo1的原型对象是Object.getPrototypeOf(foo1)存的指针，指向foo.prototype的内存地址，不是拷贝，每次读取的值都是当前foo.prototype的最新值。

打印foo1：

小结

写了好几天，以前网上不少图文博客，那些线指来指去，就我我的看来仍是比较难以理解的，因此本文纯文字的形式来描述这些概念，相信认真看完的同窗确定都有所收获，若是没看懂的话，建议多看几遍，这部分概念真的很重要！

PS：实际上还有不少引伸出来的东西没写全，准备放到其余文章中去写。

以为个人博客对你有帮助的话，就给我点个Star吧！

前端进阶积累、公众号、GitHub、wx:OBkoro一、邮箱：obkoro1@foxmail.com

以上2019/8/25

做者：OBKoro1

参考资料：

MDN:对象原型

JS原型链与继承别再被问倒了

从__proto__和prototype来深刻理解JS对象和原型链