Prototype chain pattern (basic)
案例一
function creat(name, age){
this.name=name;
this.age=age;
this.write=function (){
console.log("i can write"+this.name);
};
}
var p1=new creat("xiaobai",13);
p1.write();
var p2=new creat("xiaohei",15);
p2.write();
console.log(p1.writeJs === p2.writeJs);>>false
The constructor pattern has the concept of class and instance, and instances and instances are independent of each otherinstance identification
案例一拓展
function creat(name, age){
this.name=name;
this.age=age;
creatjsPerson.prototype.writeJs=function(){
console.log("i can write"+this.name);
};
};
var p1=new creat("xiaobai",13);
p1.write();
var p2=new creat("xiaohei",15);
p2.write();
console.log(p1.writeJs === p2.writeJs);>>true
The prototype mode based on the constructor mode solves the problem of public method or property
Extract the same properties and methods between instances into public properties and methods, and
put them in creatjsPerson.prototype if you want them to be public
1. Principle
1), each function data type (ordinary function, class) has a built-in property: prototype (prototype), and this property is the value of an object data type
2), and on the prototype, the browser is born to give He added a property constructor (constructor), the property value is the current function (class) itself
3), each object data type (ordinary object, instance, prototype...) also comes with a property: proto , the property value is the current The prototype of the class to which the instance belongs (prototype)
案例二
function Fn(){
this.x=100;
}
Fn.prototype.getX=function (){
console.log(this.x);
};
var f1=new Fn;
var f2=new Fn;
console.log(Fn.prototype.constructor === Fn);
>>true
2. object is the base class of all object data types in js (the top-level class)
1), f1 instanceof Object>>true>> Because f1 can look up to the superior through __proto__, no matter how many levels, Object can always be found in the end
2), there is no __proto__ attribute on object.prototype
3. Prototype chain mode
f1.hasOwnProperty("x");
hasOwnProperty is a property of f1
But we found that there is no such method on the private property of f1, so how to deal with it?
1) When obtaining the attribute value through the method of "object name.attribute name", first search on the private attribute of the object. If this attribute exists in the private, the private attribute value is obtained.
1. If there is no private one, use __proto__ to find the prototype of the class to which it belongs (the properties and methods defined on the prototype of the class are all public properties and methods of the current instance). If the prototype exists, the public property value is obtained.
2. If there is no prototype, continue to search upward through __proto__ on the prototype until Object.prototype is found
. The mechanism of this search is the prototype chain mode
案例三
f1.getX===f2.getX>>true
f1.__proto__.getX===f2.getX
>>true
f1.getX===Fn.prototype.getX
>>true
案例三拓展
function Fn(){
this.x=100;
this.sum=function(){
};
}
Fn.prototype.getX=function (){
console.log(this.x);
};
Fn.prototype.sum=function (){
console.log(this.x);
};
var f1=new Fn;
var f2=new Fn;
f1.sum===f2.__proto__.sum
>>false
f1.sum===Fn.prototype.sum;
>>false
2）f1.hasOwnProperty>>f1.proto.proto.hasOwnProperty
In the IE browser, our prototype mode is the same principle, but the IE browser is afraid that you will modify the public through __proto__ and prohibit the use of __proto__
案例四
f1.sum=function(){
>>修改自己私有的sum
};
f1.__proto__.sum=function(){
>>修改所属类原型上的sum
};
Fn.prototype.sum=function(){
>>修改公有的sum
}