In the last article, I knew how to use object Or object literal to facilitate the creation of objects , But there are still some shortcomings , This causes multiple objects that create the same interface to need to be defined repeatedly , Poor reuse rate of code , So in ES6 Formal support for classes and inheritance .
Factory mode
function person(name,sex,year){
let o=new Object();
let o.name=name;
let o.sex=sex;
let o.year=year;
let o.selfDescriptor=function(){
console.log(this.name)
}
return o;
}
let person1=person('yangyang',' male ',24);
console.log(person1);
//{
// name: 'yangyang',
// sex: ' male ',
//year: 24,
// selfDescriptor: [Function (anonymous)]
//}
Copy code
Although factory pattern can create similar objects , But it doesn't solve the problem of object identification
Constructor Pattern
function Person(name,sex,age){
this.name=name;
this.sex=sex;
this.age=age;
this.sayname=function(){
console.log(this.name);
}
}
let person1=new Person('fangfua',' Woman ',33);
let person1=new Person('lulu',' male ',21);
person1.sayname();//fangfua
person2.sayname();//lulu
Copy code
Different from the factory model
- Create objects that are not shown
- Properties and methods are assigned directly to this
- No, return
- Function names need to be capitalized
new What happens inside the operator when it creates an instance
-
A new object is created in memory
-
Inside this new object [[Prototype]] Property is assigned to the constructor prototype attribute
-
In the constructor this Assigned to this new object
-
Code to execute the constructor , Add properties to the new object
-
If the constructor returns a non empty object , Returns the object , otherwise , Return the newly created object
When constructing instantiation, if no parameters are passed , The parentheses after the constructor can be deleted
Archetypal model
Using prototype objects , The properties and methods defined above can be shared by instances ;
function Person(){
Person.prototype.name="fangfua";
Person.prototype.sex=' Woman ';
Person.prototype.age=33;
Person.prototype.sayname=function(){
console.log(this.name);
}
}
let person1=new Person();
let person1=new Person();
person1.sayname();//fangfua
person2.sayname();//fangfua
Copy code
Just create a function , Will follow the rules , Create a... For the function prototype Attribute points to prototype object , The prototype object will also have a constructor Properties of , Point to the constructor associated with it ;
Every time you create an instance , Constructor's [[prototype]] Property will be assigned to the instance object , Namely proto
Be careful : Instances are directly related to prototypes , Instances and constructors do not
How to judge that the instance object and constructor have the same prototype object
Prototype .isPrototypeOf( example )
Example :Person.prototype.isPrototypeOf(person1)//true
Object.getPrototypeOf() Returns the internal properties of the parameter [[prototype]] Value
Prototype level
function Person(){
Person.prototype.name="fangfua";
Person.prototype.sex=' Woman ';
Person.prototype.age=33;
Person.prototype.sayname=function(){
console.log(this.name);
}
}
let person1=new Person();
let person1=new Person();
person1.name='gungun';
console.log(person1.name);//gungun From instance
console.log(person2.name);//fangfua From the prototype
Copy code
Find a property on the instance object , It will look up from the instance itself , If you don't find it, you'll find it from the prototype object
Object.hasOwnProperty() Method can determine whether the attribute appears on the instance or prototype (true Yes, on the example ,false It's on the prototype )
There are three methods to traverse the property name or value on the instance or prototype
for...in
Object.keys()
function Person(){
Person.prototype.name="fangfua";
Person.prototype.sex=' Woman ';
Person.prototype.age=33;
Person.prototype.sayname=function(){
console.log(this.name);
}
}
let keys=Object.keys(Person.prototype);
console.log(keys)//name,sex,age.sayname
Copy code
Object.values()
const o={
foo:'bar',
baz:1,
qux:{}
}
console.log(Object.values(o));//['bar',1,{}]
Copy code