图文并茂的帮助你更好的理解JavaScript原型.
熟记并理解以下规则,保你深入理解对象原型,保你面试无忧.
1 . 任何对象都拥有 __proto__(隐式原型) 属性, 一般指向他们的构造函数的原型 (prototype) .
var a = new Array ()
// a 是一个数组对象 默认拥有__proto__ 属性
console.log(a.__proto__ === Array.prototype); // true
// 白话就是 由谁创建 其__proto__ 就指向谁的 prototype
2 . 原型链的顶端是Object.prototype，其 __proto__为 null
console.log(Object.prototype.__proto__ === null); // true
// 这是一个特例,为了避免JavaScript死循环.
3 . 所有函数都拥有prototype （显式原型）属性
任何函数的 prototype.__proto__ 都指向 Object.prototype 特例见第 2
4 . 所有函数都是Function 的 实例
function fn () {
// some code
}
// fn 是 Function 构造函数创建出来的
// 因此 fn 的 __proto__ 属性指向 Function 的 原型对象
console.log(fn.__proto__ === Function.prototype); // true
类似的 十分容易就能理解
var obj = {} // 可以看做是 var obj = new Object ()
var arr = [] // var obj = new Array ()
// 因此他们的构造函数分别是 Object 和 Array
console.log(obj.__proto__ === Object.prototype); // true
console.log(arr.__proto__ === Array.prototype); // true
5 . 更奇葩的来了，Object Function Array 本身也都是一个函数，由于是最常用的，所以JavaScript帮我们实现了
// 当我们通过构造函数的方式来创建一个对象 ，其本质也是new一个普通的函数
// 因此可以得出
console.log(Function.__proto__ === Function.prototype); // true
console.log(Object.__proto__ === Function.prototype ); // true
console.log(Array.__proto__ === Function.prototype); // true
// 可印证 第4点
6 . 原型对象中又拥有constructor属性,该属性指向函数本身,这个好理解
console.log(Function.prototype.constructor === Function); // true
console.log(Object.prototype.constructor === Object); // true
console.log(Array.prototype.constructor === Array); // true
7 . 先普及一波 原型链 概念
如果想要找到一个对象的属性,首先会先在自身查找,如果没有,就会通过
__proto__属性一层层的向上查找,直到原型链的顶端 Object.prototype(__proto__: null)
这种通过某种纽带(__proto__)将对象之间形成一种继承关系 这种关系呈现出一种链条的形状 将这种链条称之为原型链
8 . 根据第 6 条可以推论得:
console.log(fn.constructor===Function); // true
// 解析:
// fn自身并没有constructor属性,所以他会顺着原型链向上找
// fn.__proto__ 指向的是 Function.prototype 见第4
// Function.prototype.constructor === Function
console.log(Function.constructor === Function); // true
console.log(Object.constructor === Function); //true
9 . Function.prototype.__proto__ === Object.prototype
Function是一个特殊的例子 他创造了所有的函数,但他自身也是一个函数,他自己同时也创造了自己 此处见第 5 条 (感谢网友指出的错误)
下面配合几张原型图,帮助大家更好的理解.
构造函数创建对象字面量原型图
function Animal (color) {
this.color = color
}
var dog = new Animal ('黑色')
当我们创建一个函数时原型如下:
构造函数创建对象字面量原型图
完整对象字面量原型图:
var obj = { name: '陈二狗' }
完整对象字面量原型图
数组原型链
var arr = ['第一个数','第二个数','第三个数']
数组原型链
基本包装类型原型链
var str = new String('str') // var str = 'str'
基本包装类型
其实所有的原型链规则都是根据上面的规则来的,只要能记住并理解,那么你也就理解原型了
如果有纰漏 忘指出,如果有转载,麻烦注明作者yucccc.
网友评论