Constructors and stereotypes

Constructors and prototypes

1.1 Three ways to create objects — review

Literal mode
```
var obj = {};
Copy the code
```
The new keyword
```
var obj = new Object(a);Copy the code
```

Constructor mode

function Person(name,age){
  this.name = name;
  this.age = age;
}
var obj = new Person('zs'.12);
Copy the code

1.2 Static and instance Members

1.2.1 Instance Members

Instance members are members added by this inside the constructor, as in uname age sing. Instance members can only be accessed by the instantiated object

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
     this.sing = function() {
     console.log('I can sing'); }}var ldh = new Star('Andy Lau'.18);
console.log(ldh.uname);// Instance members can only be accessed through the instantiated object
Copy the code

1.2.2 Static Members

Static members A member added to the constructor itself, as in the following code, is a static member, which can only be accessed through the constructor

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
     this.sing = function() {
     console.log('I can sing');
    }
}
Star.sex = 'male';
var ldh = new Star('Andy Lau'.18);
console.log(Star.sex);// Static members can only be accessed through constructors
Copy the code

1.3 Constructor problems

The constructor method is nice, but it can be a waste of memory.

1.4 Constructor prototype prototype

Constructors The functions assigned by the stereotype are shared by all objects.

JavaScript states that each constructor has a Prototype property that points to another object. Note that prototype is an object whose properties and methods are all owned by the constructor.

We can define those immutable methods directly on a Prototype object so that all object instances can share them.

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
Star.prototype.sing = function() {
	console.log('I can sing');
}
var ldh = new Star('Andy Lau'.18);
var zxy = new Star('Jacky Cheung'.19);
ldh.sing();// I can sing
zxy.sing();// I can sing
Copy the code

1.5 Object Prototype

All objects have a __proto__ attribute that points to the prototype object constructor. We can use the constructor's properties and methods because the object has a __proto__ prototype. __proto__ object prototype is the same as the prototype object prototype. The point of __proto__ object prototype is to provide a direction, or a route, for the object search mechanism, but it is a nonstandard property and therefore cannot be used in actual development. It just points internally to the prototype object prototypeCopy the code

1.6constructor constructor

Both __proto__ and prototype objects have a constructor property inside. Constructor we call it a constructor because it refers back to the constructor itself. Constructor is used primarily to record which constructor the object refers to, and it can redirect the prototype object to the original constructor. In general, the methods of the object are set in the prototype object of the constructor. If we have methods for more than one object, we can assign to the prototype object as an object, but this overwrites the original contents of the constructor prototype object so that the modified constructor object no longer points to the current constructor. At this point, we can add a constructor pointing to the original constructor in the modified prototype object.Copy the code

If we modify the original stereotype object and assign the stereotype object to an object, we must manually use constructor to refer back to the original constructor as follows:

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
 }
 In many cases, we need to manually refer back to the original constructor using the constructor property
 Star.prototype = {
 // If we modify the original stereotype object and assign the stereotype object to an object, we must manually use constructor to refer back to the original constructor
   constructor: Star, // Manual setting refers back to the original constructor
   sing: function() {
     console.log('I can sing');
   },
   movie: function() {
     console.log('I'll be in a movie.'); }}var zxy = new Star('Jacky Cheung'.19);
console.log(zxy)
Copy the code

As a result of the above code running, set the constructor property as shown below:

If the constructor property is not set, as shown:

1.7 prototype chain

Each instance object in turn has a __proto__ attribute, pointing to the constructor’s prototype object, which is also an object and has a __proto__ attribute, so that layer by layer the prototype chain is formed.

1.8 Constructor instance and prototype object triangulation

1.The constructor's Prototype property points to the constructor prototype object2.The instance object is created by the constructor, and the __proto__ attribute of the instance object points to the constructor's prototype object3.Constructor of the prototype objectconstructorProperty refers to the constructor, the prototype of the instance objectconstructorProperty also points to the constructorCopy the code

1.9 Search mechanism of prototype chain and members

Any object has a prototype object, that is, the prototype property. Any prototype object is also an object, and that object has a __proto__ property.

When accessing properties (including methods) of an object, you first look up whether the object itself has the properties. If not, look for its prototype (that is, the prototype object __proto__ points to). If not, find the prototype of the prototype Object (Object's prototype Object). And so on until Object is found (null). The point of __proto__ object archetypes is to provide a direction, or a route, for the object member lookup mechanism.Copy the code

1.10 This points to the prototype object

This in the constructor and this in the prototype object refer to our new instance object

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
var that;
Star.prototype.sing = function() {
    console.log('I can sing');
    that = this;
}
var ldh = new Star('Andy Lau'.18);
// 1. In the constructor, this refers to object instance LDH
console.log(that === ldh);//true
// 2. This in the prototype object function refers to LDH
Copy the code

1.11 Built-in methods for array extension through prototypes

 Array.prototype.sum = function() {
   var sum = 0;
   for (var i = 0; i < this.length; i++) {
   sum += this[i];
   }
   return sum;
 };
 Sum () = sum(); sum() = sum()
Copy the code

2. The inheritance

2.1 the call ()

Call () can call functions
Call () can modify the reference to this. When call() is used, the first parameter is this, and the second parameter is 3. Use commas to separate connections

 function fn(x, y) {
     console.log(this);
     console.log(x + y);
}
  var o = {
  	name: 'andy'
  };
  fn.call(o, 1.2);// This refers to object O,
Copy the code

2.2 The child constructor inherits attributes from the parent constructor

Start by defining a parent constructor
Define a child constructor
The child constructor inherits the attributes of the parent constructor (using the call method)

 // 1. Parent constructor
 function Father(uname, age) {
   // This points to an object instance of the parent constructor
   this.uname = uname;
   this.age = age;
 }
  // 2. Child constructor
function Son(uname, age, score) {
  // This points to an object instance of the child constructor
  3.Father.call();this, uname, age);
  this.score = score;
}
var son = new Son('Andy Lau'.18.100);
console.log(son);
Copy the code

2.3 Borrow archetypal object inheritance methods

Start by defining a parent constructor
Define a child constructor
The child constructor inherits the attributes of the parent constructor (using the call method)

// 1. Parent constructor
function Father(uname, age) {
  // This points to an object instance of the parent constructor
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
  console.log(100000);
 };
 // 2. Child constructor
  function Son(uname, age, score) {
      // This points to an object instance of the child constructor
      Father.call(this, uname, age);
      this.score = score;
  }
// Son.prototype = Father.prototype; This is problematic because if you change the child, the parent will change as well
  Son.prototype = new Father();
  If you modify a prototype object in the form of an object, remember to use constructor to refer back to the original constructor
  Son.prototype.constructor = Son;
  // This is a subconstructor specific method
  Son.prototype.exam = function() {
    console.log('Kids have tests');

  }
  var son = new Son('Andy Lau'.18.100);
  console.log(son);
Copy the code

The code result is shown in the figure above:

3. New methods in ES5

3.1 Array method forEach traverses arrays

 arr.forEach(function(value, index, array) {
       // The first argument is an array element
       // The second argument is the index of the array element
       // The third argument is: the current array
 })
  // The for loop equivalent to array traversal has no return value
Copy the code

3.2 Array method filter Filters arrays

  var arr = [12.66.4.88.3.7];
  var newArr = arr.filter(function(value, index,array) {
  	 // The first argument is an array element
     // The second argument is the index of the array element
     // The third argument is: the current array
     return value >= 20;
  });
  console.log(newArr);//[66,88] // The return value is a new array
Copy the code

3.3 Array method some

Some looks for elements in the array that meet the criteriavar arr = [10.30.4];
 var flag = arr.some(function(value,index,array) {
    // The first argument is an array element
     // The second argument is the index of the array element
     // The third argument is: the current array
     return value < 3;
  });
console.log(flag);//false returns a Boolean value that terminates the loop as soon as one element is found
Copy the code

3.4 Screening commodity cases

Define array object data

var data = [{
            id: 1.pname: 'millet'.price: 3999
        }, {
            id: 2.pname: 'oppo'.price: 999
        }, {
            id: 3.pname: 'glory'.price: 1299
        }, {
            id: 4.pname: 'huawei'.price: 1999},];Copy the code

Use forEach to traverse the data and render it to the page

data.forEach(function(value) {
  var tr = document.createElement('tr');
  tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
  tbody.appendChild(tr);
 });
Copy the code

Filter data by price

Get the search button and bind the click event to it

search_price.addEventListener('click'.function() {});Copy the code

Use filter to filter out the price information entered by the user

search_price.addEventListener('click'.function() {
      var newDate = data.filter(function(value) {
        //start.value is the start range
        //end.value is the end interval
      	return value.price >= start.value && value.price <= end.value;
      });
      console.log(newDate);
 });
Copy the code

Re-render the filtered data into the table

Encapsulate the logic for rendering data into a function

function setDate(mydata) {
      // Empty the data inside the original tbody
  tbody.innerHTML = ' ';
  mydata.forEach(function(value) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
      tbody.appendChild(tr);
  });
 }
Copy the code

Re-render the filtered data

 search_price.addEventListener('click'.function() {
     var newDate = data.filter(function(value) {
     return value.price >= start.value && value.price <= end.value;
     });
     console.log(newDate);
     // Render the filtered object to the page
     setDate(newDate);
});
Copy the code

Filter by commodity name

Gets the commodity name entered by the user

Bind the click event to the query button and filter the entered item name with this data

 search_pro.addEventListener('click'.function() {
     var arr = [];
     data.some(function(value) {
       if (value.pname === product.value) {
         // console.log(value);
         arr.push(value);
         return true; // return must be followed by true}});// Render the data to the page
     setDate(arr);
})
Copy the code

3.5 Some is different from forEach

If you are looking for a unique element in an array, use some. If you return true in some, it is more efficient to terminate the iteration
A return does not terminate an iteration in forEach

3.6 Trim Method Removes Spaces at both ends of a string

var str = ' hello '
console.log (STR. The trim ())//hello removes Spaces on both ends
var str1 = ' he l l o '
console.log (STR. The trim ())//he l l o
Copy the code

3.7 Obtaining the Attribute name of an Object

Keys Gets the name of the property in the current Object and returns an array

 var obj = {
     id: 1.pname: 'millet'.price: 1999.num: 2000
};
var result = Object.keys(obj)
console.log(result)/ / / id, pname, price, num
Copy the code

3.8 Object. DefineProperty

Object.defineproperty Sets or modifies attributes in an Object

Object.defineProperty(Object, modified or new attribute name, {value: The value of the modified or added attribute,writable:true/false.// If the value is false, it is not allowed to change this attribute value
		enumerable: false.// Enumerable is not allowed if it is false
        configurable: false  // If the configured information is false, no deletion of this property is allowed. The property can be deleted or modified again
})	
Copy the code