黑基网 首页 学院 编程开发 查看内容

深入浅出javascript对象原型

2017-8-1 01:23| 投稿: xiaotiger |来自: 互联网

摘要: 图文并茂的帮助你更好的理解JavaScript原型. 熟记并理解以下规则,保你深入理解对象原型,保你面试无忧. 1 . 任何对象都拥有 __proto__(隐式原型) 属性, 一般指向他们的构造函数的原型 (prototype) . var a = new Arra ...

图文并茂的帮助你更好的理解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) 见第2
这种通过某种纽带(__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.



作者:宇cccc
链接:http://www.jianshu.com/p/aa2f885ba871
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册黑基账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!

本文出自:http://www.jianshu.com/p/aa2f885ba871

免责声明:本文搜集整理自互联网,版权归原作者所有,文中所述不代表本站观点,若有侵权或转载等不当之处请联系我们处理,请我们一起为维护良好的互联网秩序而努力!联系方式见网站首页右下角。


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论


新出炉

返回顶部