javascript Senior (2)

---

typora-copy-images-to: media

---

The first phase of 02 front-end basic skills. .Js advanced front-end basis

Basic grammar

learning target

• To understanding

 重新认识instanceof

- 原型链不可变
- for..in的问题

• Emphasis

• Emphasis

  • The context of the call mode

  • js Inheritance

  • Closure

    ​

1. Re-understanding instanceof

js description of the basic stage instanceof action: determining whether an object is an instance of a constructor

Now we learn the prototype, but also learn the prototype chain, so we can now more rigorous description of his role:

Determining a function prototype object, whether the object instance in the prototype chain

var arr = [];
console.log(arr instanceof Array); //true
console.log(arr instanceof Object);  //true

2. prototype chain immutable

function Person(){
}
var p1 = new Person();
console.log(p1 instanceof Person); // ?

Person.prototype = {
    constructor : Person,
    a : 1
}
console.log(p1 instanceof Person); // ?
var p2 = new Person();
console.log(p2 instanceof Person); // ?

3. The context of the calling function

3.1 review ways before calling the function we learn

• Ordinary call

  this -- > window

  function fn(){
      console.log(this);  // window
  }
  fn();

• Object calls

  this -- > obj

  function fn(){
    console.log(this) // obj
  }
  var obj = {
      f : fn
  };
  obj.f();
  

• The constructor calls

  this -> instance constructor

  function Person(name){
      this.name = name; //this --> 实例
  }
  
  var p1 = new Person('zs');

• Timer callback function

  this -- > window

  setTimeout(function(){
    console.log(this)// window
  },1000);

• The event handler called

  this -> Event Source

  box.onclick = function(){
    console.log(this); // box
  }

  ​

We summarize the sentence:. This point is to determine when the function call who call this function, this point who

3.2 three methods of calling a function context

Why learn the context of the calling function?

Because the point so that we can take control of this function

3.2.1 call method

Role: call the function, and modify the function in this point of

Syntax: Function name call (object [argument]);

Detailed parameters:

The first argument: Who let the function in this point, who wrote

Subsequent arguments: passed to the called function arguments, separated by commas

function fn(x, y){
    console.log(this); // ['a','b','c']
    console.log(x + y); //8
}
fn.call(['a','b','c'], 3, 5);

3.2.2 apply method

Role: call the function, and modify the function in this point of

Syntax: function name apply (objects, arrays);.

Detailed parameters:

The first argument: Who let the function in this point, who wrote

The second parameter: going to pass an array, stored inside the called function needs arguments

function fn(x, y){
    console.log(this); // {a : 1}
    console.log(x + y); //8
}
fn.apply({a : 1}, [3, 5]);

3.2.3 bind method

Action: no calling function, a new function clone, and modify this point to the new functions, the new function returns

Syntax: Function name bind (Object [, arguments]);

Detailed parameters:

The first argument: Who let the function in this point, who wrote

Subsequent arguments: passed to the called function arguments, separated by commas

function fn(x, y){
    //调用newFn时打印结果
    console.log(this);  //{b:2}
    console.log(x + y); //8
}

var newFn = fn.bind({b:2}, 3, 5);
newFn();

summary:

• call and apply calls function, bind does not call the function
• apply the required arguments into an array, the array is then passed in

4. for..in problem

for ... When in traversal, property on the prototype will also traverse out

function Person(name){
    this.name = name;
}

Person.prototype.type = 'human';

var zs = new Person('zs');

for(var key in zs){
    console.log(key); // name , type  把type也打印出来了
}

If we wanted to print the object's attributes themselves, you can use the method to solve hasOwnProperty

hasOwnProperty effect: the judge is not an object own property

hasOwnProperty syntax: Object .hasOwnProperty ( 'attributes') returns true, otherwise false

function Person(name){
    this.name = name;
}

Person.prototype.type = 'human';

var zs = new Person('zs');

for(var key in zs){
    if(zs.hasOwnProperty(key)){
        console.log(key);   //只有自己的name
    }
}

5. js Inheritance

5.1 Why study the inheritance js

At this point we hope son objects, but also has money far objects, house these properties, but we do not want to start over again, how do?

var far = {
    money : $1000000000,
    house : ['别墅', '大别墅', '有游泳池的打别墅', '城堡'];
}

var son = {
    
}

5.2 succession between two objects

5.2.1 traverse the object

var far = {
    wife : '小龙女',
    money : 1000000000,
    house : ['别墅', '大别墅', '有游泳池的打别墅', '城堡']
}

var son = {
    wife : '小黄飞',
}

//通过for..in遍历far
for(var key in far){
    son[key] = far[key];
}

console.log(son); // 此时son拥有了money和house .

But there is a problem writing the code above: the value of the wife also inherited some of us want to, not inherited so we have to change the code.

for(var key in far){
    //自己没有的才继承
    if(!son.hasOwnProperty(key)){
        son[key] = far[key];
    }
}

Just deal with this problem, but we found the same code for two objects on it. This is more occupied by memory

5.2.2 implementation inheritance by the create method

Implementation inheritance by ceate method to avoid traversing the object mode, memory-intensive problems

create method Syntax: the Object.create (reference object) Returns a new object

effect create method: a new object is returned __proto__to point of reference objects

var far = {
    wife : '小龙女',
    money : 1000000000,
    house : ['别墅', '大别墅', '有游泳池的打别墅', '城堡']
}

var son = Object.create(far);
son.wife = '小黄飞';
console.log(son.money); //1000000000
console.log(son.house); //['别墅', '大别墅', '有游泳池的打别墅', '城堡']
console.log(son.wife); // 小黄飞
console.log(son.__proto__ === far); //true

5.3 inherit the constructor

We work constantly to create multiple objects with the same attributes, so often write constructor.

So out of the object constructor to create a succession of how to achieve it?

5.3.1 Borrowing Constructor

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        console.log('hello, ' + '我是' + this.name );
    }
}

function Student(name, age, score){
    this.score = score;
    Person.call(this, name, age);//借用构造函数
}

var stu = new Student('zs', 18, 100);
console.log(stu); //{score : 100, name : zs, age : 18}
stu.sayHello(); //hello, 我是zs

But we generally do not write the method body of the constructor function, we write the method in the function prototype, so this time borrowing constructor function can not be inherited method, and the method we want to prototype inheritance can use prototype inheritance

5.3.2 prototypal inheritance

For inherited methods

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        console.log('hello, ' + '我是' + this.name );
    }
}

function Student(name, age, score){
    this.score = score;
}

Student.prototype = new Person();

var stu = new Student('zs', 18, 100);
console.log(stu); //{score : 100}
stu.sayHello(); //hello, 我是undefined

We found that the method inherited, but the property has not inherited

5.3.3 combination of inheritance

Borrowing constructor + prototype inheritance

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        console.log('hello, ' + '我是' + this.name );
    }
}

function Student(name, age, score){
    this.score = score;
    Person.call(this, name, age);
}

Student.prototype = new Person();

var stu = new Student('zs', 18, 100);
console.log(stu); //{score : 100, name : zs, age : 18}
stu.sayHello(); //hello, 我是zs

6. Closure

The concept: combination of function and function scope

Popular understood that: the internal variable function using an external function, the entire exterior of a closure formed function

6.1 Role closure package:

1. Privatization data
2. Data Retention

function main(){
    var money = 10000;  //放到局部作用中,防止全局变量污染(私有化数据)

    return {
        queryMoney : function(){
            return money;
        },
        payMoney : function(num){
            money -= num;
        },
        addMoney : function(num){
            money += num;
        }
    }
}

var moneyManger = main();  // 通过moneyManger 可以获取到局部的变量money

6.2 closures disadvantages:

Since the function of internal variables using external functions, leading to the outside of this function can not be recovered if the code out there is a lot of closure, may lead to memory leaks (do not deliberately use closures).;

7. expand contents

7.1 static member function and instance members

Members: refers to the properties and methods

Static member: functions are objects, functions, own property

Examples of members: referring specifically constructor written in the constructor body, to add an instance of an attribute by this.xxx

function Person(){
    this.name = name; //实例成员
    this.age = age; // 实例成员
}

Person.type = '呵呵'; //静态成员

7.2.Function prototype map

Functon create themselves,

Object is an instance of Function