Front end development JS — object and prototype

Time:2020-1-13
27. Create object
① Batch create objects in factory modeDisadvantages: unrecognized object, i.e. all objects are of object type; method memory space is wasted / encapsulation is not perfect
Function sayname() {/ / can effectively save memory space
  console.log(this.name);
}
function createObject(name, age, gender){
var obj = {
name:name,
age:age,
gender:gender,
Sayname: sayname, / / write the method outside, which can effectively save memory space
};
Return obj; / / or directly return the object
}
 
var o1 = createObject(‘zhangsan’, 12, ‘man’);
var o2 = createObject(‘lisi’, 15, ‘woman’);
var dog = createObject(‘erha’, 4, ‘man’);
console.log(o1, o2, dog);
//Find constructor by instance
console.log(o1.constructor);     //Object
 
② Constructor mode create object
Custom constructor problem: Method memory is wasted / encapsulation is not perfect
          
Function sayname() {/ / can effectively save memory space
  console.log(this.name);
}
function Person(name, age, gender){
//This points to the instance created by the new keyword
this.name = name;
this.age = age;
this.gender = gender;
Sayname: sayname, / / write the method outside, which can effectively save memory space
}
var p1 = new Person(“terry”,11,”man”);
console.log(p1)
console.log(p1.constructor);    //[Function: Person]
 
function Dog(name, age, color){
//This points to the instance created by the new keyword
this.name = name;
this.age = age;
this.color= color;
Sayname: sayname, / / write the method outside, which can effectively save memory space
}
var d1 = new Dog(“erha”,2,”red”);
console.log(d1)
console.log(d1.constructor);   //[Function: Dog]
 
③ Prototype pattern creating objects
Problem: the data isolation of the instance is not safe, because the data in it is shared
function Person(){}
Person.prototype.name = ‘zhangsan’;
Person.prototype.friends = [];
Person.prototype.sayName = function(){
  console.log(this.name);
};
var p1 = new Person();
consoe.log(p1.name);    //zhangsan
var p2 = new Person();
consoe.log(p1.name);    //zhangsan
p1.friends.push(‘terry’);
console.log(p1.friends);  //[‘terry’]
console.log(p2.friends);  //[‘terry’]
console.log(p1.sayName === p2.sayName);   //true
 
④ Combining constructor pattern with prototype pattern
//Each instance’s own is put into the constructor, and the shared instance is put into the prototype object
function Person(name, age, gender){
//This points to the instance created by the new keyword
this.name = name;
this.age = age;
this.gender = gender;
this.friends = [];
}
Person. Prototype = {/ / data shared by the instance
constructor : Person,
sayName:function(){
  alert(this.name);
       }
}
 
var p1 = new Person(“terry”,11,”man”);
console.log(p1);
console.log(p1.constructor);   //{Function: Person]
var p2 = new Person(“larry”,11,”woman”);
p1.friends.push(‘hello’);
console.log(p1.friends);   //[‘hello’]
console.log(p2.friends);   //[]
 
Console.log (person (‘aaaa ‘)) / / undefined. Because this pointer needs to point to the new keyword, there is only person, and there is no new, so it does not return an object. It returns undefined
 
28. In depth understanding of objects
         ① Enumerability:
When printing an object, you can see the attributes, and the enumerability of these attributes is true;
The attributes returned by the for in loop, whose enumerability is also true.
 
          ② Object’s property type:
[[configurable]]: indicates whether the attribute can be redefined by deleting it, whether the attribute can be modified, or whether the attribute can be modified to accessor attribute directly defined in the object. The default is true)
 
[[enumerable]]: indicates whether the property can be returned through the for in loop. (directly defined in the object, the default is true)
 
[[writable]]: indicates whether the value of the property can be modified. (directly defined in the object, the default is true)
 
[[value]]: the data value containing this property name: Jacky
 
          ③ Property Properties of objects
var obj = {
  name:’zhangsan’,
  age:12,
};
console.log(obj); //{name:’zhangsan’, age: 12,}
 
Read the property object. Getownpropertydescriptor(); get the descriptor of the specified property. This method takes two parameters, the first is the object of the property, and the second is the property name of the descriptor to be read
 
//Get the description of the property
console.log(Object.getOwnPropertyDescriptor(obj, ‘name’));   //{vale: ‘zhangsan’, writerable:true, enumerable:true, configurable: true}
 
To modify the default property, you must use the object. Defineproperty() method of ecmascript5 to define property (the object where the property is located, the name of the property, a descriptor object);
 
//Modify the description of the property
Object.defineProperty(obj, ‘name’, {
//Set property cannot be enumerated
enumerable: false,   ——->console.log(obj);   //{age:12}
//Set property cannot be modified
writable:false,             ——–>obj.name = ‘lisi’; console.log(obj.name); //zhangsan
//Set property value
value:’terry’,              ———>console.log(obj.name);     //terry
//Set whether the attribute can be deleted, redefined, and configured
Configuration: false, – ——– > other people can’t change this property
})
 
④ Accessor propertiesThere is no value. There are get method and set method. The default property of configurable is false
var obj = {
  name:’zhangsan’,
  age:12,
  _weight:100,
};
Object.defineProperty(obj, ‘weight’, {
  get:function(){
    return this._weight-5;
  },
  set:function(param){
    this._weight = param
  },
  //enumerable:true,
});
/*Object.defineProperty(obj, ‘_weight’, {
  enumerable:false
});*/
console.log(obj.weight);   //95
obj.weight = 130
console.log(obj.weight);   //125
console.log(obj._weight);   //130
console.log(obj);  //   {name:’zhangsan’, age: 12, weight: [Getter|Setter]}
                    console.log(Object.getOwnPropertyDescript(obj, ‘weight’));
console.log(Object.getOwnPropertyDescript(obj, ‘_weight’));

Recommended Today

Understanding the details of promise / A + specification based on browser built-in promise

This paper mainly records the details of promise / A + specification that are not paid much attention to, and shows the specific scenarios described in the specification. preheat Consider the execution results in the following scenarios. Promise.reject(10010).then().then(function(value){ console.log(‘onFulfilled value: ‘,value); }, function (reason) { console.log(‘onRejected reason: ‘,reason) }) Promise.resolve().then(function () { var obj = […]