Detailed explanation of JS prototype

This article mainly shares with you the detailed explanation of JS prototype and the 5 rules of prototype. I hope this article can help everyone.

• All reference types (arrays, objects, functions) have object characteristics, which can be freely extended attributes (except "null")

var obj ={};obj.a=100//100var arr=[];arr.a=100//100function fn(){}
fn.a=100//100

• All application types have a proto attribute (implicit prototype), and the attribute value is an ordinary object

console.log(obj.__proto__);//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}console.log(arr.__proto__);//[constructor: ƒ, concat: ƒ, pop: ƒ, push: ƒ, shift: ƒ, …]console.log(fn.__proto__);
//ƒ () { [native code] }

• All functions have a prototype attribute (explicit prototype), and the attribute value is also an ordinary object

console.log(fn.prototype)
//{constructor: ƒ}

• All reference types The proto attribute value points to its constructor prototype attribute value (that is, the implicit prototype of all reference types points to the explicit prototype of his constructor)

console.log(obj.__proto__===Object.prototype);  //true//Object是一个构造函数

• When trying to get a certain attribute of an object, if the object itself does not have this attribute, then it will look for it in its proto (that is, the prototype of its constructor)

/*测试*/function Foo(name,age){
    this.name = name;
}
Foo.prototype.alertName = function(){//由于Foo.prototype本身也是一个对象，而对象是可以自由扩展属性的
    alert(this.name);
}var f = new Foo('zhan');
f.printName = function(){
    console.log(this.name);
}
f.printName();//zhan 可以直接在这个对象中找到这个属性f.alertName();//alert弹出zhan 这时候在这个对象本身找不到这个属性，去Foo.prototype找,得到值/*******************************//*之前在牛可网碰到到一道面试题*/var A = {n:4399};var B = function(){
    this.n = 9999;
}var C = function(){
    var n = 8888;
}
B.prototype = A;
C.prototype = A;var b = new B();var c = new C();
A.n++;
console.log(b.n);//9999console.log(c.n);//4400//先从他的实例中找，找不到去它的构造函数的prototype中找

this

For the above test code, it always points to the object itself, so executing f.alertName
can pop up zhan

The properties of the loop itself

Still for the above test code, if you loop, you can find the name attribute, alertName attribute, and printName attribute. But in general, we only want to get the attributes defined by the object itself, such as ：name attribute and printName attribute

var itemfor(item in f){    if(f.hasOwnProperty(item)){
        console.log(item);     // 高级浏览器已经在forin中屏蔽了来自原型的属性
     //但在这里建议大家还是加上这个判断，保证程序的健壮性（程序对于规范要求以外的输入情况的处理能力）

    }
}

Related recommendations:

Instance analysis js prototype and call()

JS prototype Four steps of inheritance

7 recommended articles about js prototype chain

The above is the detailed content of Detailed explanation of JS prototype. For more information, please follow other related articles on the PHP Chinese website!