Summarize

the next day:

1. The prototype of the function:

There is a prototype attribute in each function that points to the prototype of the function, but we don't pay much attention to this attribute in ordinary functions, and generally pay attention to the prototype in the constructor . When a constructor is created, a prototype object will be created in the browser accordingly, and the prototype object also has a constructor pointing to the constructor.

1.1 Create an object through a constructor: var object name = new constructor (parameter);

One of the new objects created by the constructor has [[proto]] which points to the prototype object of the constructor. Although this property cannot be accessed directly, you can use protol to access the prototype object.

function person(name,age){
 this.name=name;            //The prototype in the constructor points to the prototype object 
this .age=age; } var p1=new person ("Li Si", 20); 

 //There is a [[proto]] in the newly created object that points to the prototype object of the constructor. 
console.log ( f1 ) ; _

Notice:

①. The properties in the prototype object can be added manually, but cannot be modified;

②. Properties and methods in the prototype, newly created objects can be accessed and called;

③. When a new property is added to the object with the same name as the prototype, the output result is the property of the object, not the property of the prototype is deleted, but the property of the prototype is overwritten;

④. This in the constructor refers to the created object;

1.2 Differences between constructors and ordinary functions:

The difference is mainly in the way of calling: ordinary functions are called directly, while constructors are called with new .

Note: The first letter of the constructor should be capitalized as much as possible, and try not to add return in the constructor .

1.3 Methods related to prototypes:

hasOwnProperty ( ): object name. hasOwnProperty ("property name");

Role: Determine whether an attribute exists in the object.


function fn(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
    }
    var f1=new fn("Li Si",20,"Male");
    console.log(fn.hasOwnProperty("name"));     //true
    console.log(fn.hasOwnProperty("page"));     //false

in operator (attribute value in object name):

Role: Determine whether a property exists in the prototype.


function fn(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.panduan=function (obj,ele){
            if(obj.hasOwnProperty(ele)){
                alert("property is on object")
            }else if(ele in obj){
                alert("property is in prototype")
            }else{
                alert("Property does not exist");
            }
        }
    }
    var f1=new fn("Li Si",20,"Male");
    f1.page="ss";
    f1.panduan(f1,"page");

1.4 Combination mode

Pros and cons of prototypes:

The objects created by the constructor can share the properties and methods in the prototype, but generally the properties of the objects we create will not be the same, so the disadvantage of the prototype is that the properties are all shared, but the methods share what the object needs.

Pros and cons of constructors:

The objects created by the constructor have different properties depending on the input, which is very suitable for the needs of the project. Although all methods can be called, all objects call the same method repeatedly, wasting too much unnecessary memory.

Combine the advantages and disadvantages of the two into a → combination mode


function fn(name,age){
  this.name=name;                       //Using the attribute customization of the constructor: solves the problem of prototype attribute sharing
  this.age=age;
}
fn.prototype.eat=function(){            //Using prototype method sharing: Solve the problem of repeated method calls of constructors
  console.log(this.name+"eat the anti");
}
fn.prototype.old=function(){
  console.log(this.age+"年龄")；
}
var f1=new fn("Li Si", 20);
f1.eat();

1.5 Dynamic Mode

The composition mode is not perfect, and it also has its shortcomings: the constructor and the prototype are scattered, which breaks the three characteristics of object-oriented - encapsulation;


function fn(name,age){
  this.name=name;                       
  this.age=age;
  if(typeof this.eat!==function){
        fn.prototype.eat=function(){
            console.log(that.name+"eaten");
        }
    }
}   
var f1=new fn("Li Si",20);
f1.eat();           //Li Si ate dinner

other:

Math.hypot( ) : The function returns the square root of the sum of squares of all arguments.
```
Math.hypot(3,4);    // 5            sqrt(3*3+5*5)=5
```
Strict Mode in ES5: " use strict "

If you call a function directly, in strict mode, this is undefined; in non-strict mode, this will point to window.

JavaScript prototype understanding summary