一篇文章轻松搞懂原型对象和原型链
2017-09-09 14:12
736 查看
头疼的原型对象和原型链
我想不少刚接触Javascript的新手对于原型对象(prototype)和原型链(__proto__)的区别和含义都表示真尼玛操蛋,下面就让我来结合简单的例子来让你彻底明白什么是原型对象,什么是原型链。
prototype和__proto__
的区别
不要想那么多,你先要知道prototype是函数才有的属性,__proto__是所有对象都有的属性。
var person = { name:'test',age:'20'} console.log(person.prototype) // 输出undefined console.log(person.__proto__) // 输出Object {} function fun(){console.log("fun")} console.log(fun.prototype) // 输出Object {} console.log(fun.__proto__) // 输出function () {}
什么是原型对象(prototype)?
原型对象的用途是为每个实例对象存储共享的方法和属性。通俗的讲,一个对象的原型对象是被继承自它的对象共享的,如B继承自A,当访问B中的属性时,会先找B自己的实例属性,找不到就会到A的原型对象里面去找。注意,B不会去自己的原型对象里面去找,也不会去A的实例属性集合中找,让我们看个例子就明白了:function Person(){ this.name = "Person"; this.age = 100; } Person.printName = function(){ //存于Person的实例属性中 console.log(this.name); } Person.prototype.printAge = function(){ //存于Person的原型对象中 console.log(this.age); } Person.prototype.name = "oPerson"; //存于Person的原型对象中 console.log(Person.name); //"Person" console.log(Person.printName); //printName函数,因为printName属于Person的实例属性 console.log(Person.printAge); //undefined,说过了对象不会访问自己的原型对象的 var person = new Person(); person.prototype.age = 50; // 这样写是会报错的,因为person不是一个函数,所以没有原型对象 console.log(person.name); // "Person",person继承自Person,自然也继承了name和age属性 console.log(person.age); // "100",person继承自Person,自然也继承了name和age属性 person.printAge(); //100,person中没有找到就去Person的原型对象里面找咯 person.printName(); //报错,person实例属性中没有,Person原型对象中也没有,我能怎么办?
什么是原型链(__proto__
)?
上面说了,如果B继承自A,那么访问B的属性时,就会依次查找B的实例属性和A的原型对象,那么问题来了?B怎么知道自己的上一级是谁?肯定要用个变量存起来吧?这个变量就是__proto__,一个对象的
__proto__指向上一级的prototype,两者是完全相等的。Object的
__proto__为null。那么什么是原型链?我们知道B的
__proto__指向A的prototype,A的
__proto__指
901a
向Object的prototype,Object的
__proto__指向null,这样一串B->A->Object的链子就叫原型链!
person.__proto__ === Person.prototype // true,可见两者是完全相同的 Person.__proto__ === Function.prototype // true,可见Person继承自Function
相关文章推荐
- 三张图搞懂JavaScript的原型对象与原型链
- 三张图搞懂JavaScript的原型对象与原型链
- 三张图搞懂JavaScript的原型对象与原型链
- 三张图搞懂JavaScript的原型对象与原型链
- 三张图搞懂JavaScript的原型对象和原型链
- 一篇文章教你搞懂javaScript原型链
- 三张图搞懂JavaScript的原型对象与原型链
- 转载一篇个人觉得不错的关于对象引用的文章
- 原型对象和原型链
- JavaScript使用原型和原型链实现对象继承的方法详解
- JavaScript 利用原型和原型链实现对象继承
- 一篇文章搞懂Python中self的含义
- 一篇文章搞懂人脸识别的十个概念
- 一篇文章搞懂人工智能、机器学习和深度学习之间的区别
- JS核心系列:浅谈 原型对象和原型链
- 一个例子让你明白原型对象和原型链
- 一篇文章搞懂leetcode位操作算法题
- 一篇文章让你搞懂 SSL 证书