脚本宝典收集整理的这篇文章主要介绍了通俗易懂的理解js原型链,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
了解原型链之前先来了解一下js创建对象的过程 https://www.cnblogs.com/geekjsp/p/15807618.html
访问一个对象时,js引擎内部的查找过程,会按以下顺序进行查找:
function Bar() {
this.color = "red"
}
Bar.prototype.color = "green";
let obj = new Bar();
obj.color = "blue";
console.log(obj.color); // blue
demo2:印证上述第二点:
function Bar() {
this.color = "red"
}
Bar.prototype.color = "green";
let obj = new Bar();
console.log(obj.color); // red
demo3:印证上述第三点
function Bar() {
}
Bar.prototype.color = "green";
let obj = new Bar();
console.log(obj.color); // green
demo4:印证上述第四点
function Bar() {
}
let obj = new Bar();
console.log(obj.color); // undefined
其实[[prototype]]和__proto__意义相同,均表示对象的内部属性,其值指向对象原型。前者在一些书籍、规范中表示一个对象的原型属性,后者则是在浏览器实现中指向对象原型。
prototype是函数才有的属性,Object没有
请看下面的代码片段:
function Person(){}
Person.__proto__==Function.prototype //true
let a={}
a.__proto__==Object.prototype //true
let Teacher=new Person();
Teacher.__proto__==Person.prototype //true
--------------------------------------------------------
function test99(){}
test99.__proto__==Object.prototype
//true
test99.__proto__==Function.__proto__
//false
---------------------------------------------------------
var one = {x: 1};
var two = new Object();
one.__proto__ === Object.prototype // true
two.__proto__ === Object.prototype // true
one.toString === one.__proto__.toString // true
说明 one.等于one.__proto__.
---------------------------------------------------------
let objP = function() {};
let obj = new objP();
创建一个obj对象 把obj对象的__proto__指向prototype
对象的__proto__属性是创建对象时自动添加的,默认值为其构造函数的prototype
因此:
objP.prototype.sayHell=function(str){console.log(str)}
let obj = new objP();
obj.__proto__ //{sayHell: ƒ, constructor: ƒ}
obj.sayHell('搞懂js原型链')
obj.方法名的时候会到__proto__上找因此会到objP.prototype
--------------------------------------------------------
function test666(){}
let test7=new test666()
test7.__proto__===test666.prototype
//true
test7.__proto__.__proto__===test666.prototype.__proto__
//true
test666.prototype.__proto__==Object.prototype
//true
Object.__proto__.__proto__
//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
Object.__proto__.__proto__.__proto__
//null
--------------------------------------------------------
var fn =function (){};
prototype是在定义函数时自动添加的, 默认值是一个空Object对象
fn.prototype
// {constructor: ƒ}
// constructor: ƒ Person()
// [[Prototype]]: Object
可以添加属性和方法,这些属性和方法将在其构造函数的所有实例之间共享
fn.prototype.name='wen';
fn.prototype.age='18';
var obj1=new fn();
var obj2=new fn();
console.log(obj1.name);
console.log(obj2.age);
obj1.constructor.prototype==fn.prototype
obj1.name的查找过程:
obj1> 构造函数fn > fn.__proto__>fn.__proto__.__proto__>null 返回undefined
--------------------------------------------------------
大多数情况下,__proto__可以理解为“构造函数的prototype”。
每当您在 JavaScript 中访问对象的属性时,它首先会检查该属性是否在对象内部可用。如果不是,它检查它的原型对象。如果它在那里那么好,你会得到财产的价值。否则,它将检查该属性是否存在于原型的原型中,如果不存在则再次检查该属性是否存在于原型的原型中,依此类推。
那么它会以这种方式检查多长时间?__proto__如果在任何点找到该属性或在任何点的值为null或,它将停止undefined。然后它会抛出一个错误,通知你它无法找到你正在寻找的属性。(https://www.freecodecamp.org/news/all-you-need-to-know-to-understand-javascripts-prototype-a2bff2d28f03/)
console.log(Object.prototype.proto===null);//true
以上是脚本宝典为你收集整理的通俗易懂的理解js原型链全部内容,希望文章能够帮你解决通俗易懂的理解js原型链所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。