I. Analysis and understanding of the causes of this

1. This refers to the environment in which the function is run (that is, the object being called). 2. The reason why JavaScript language has this design is related to the data structure in memoryCopy the code

2, this binding details

This is actually a binding that happens when the function is called, and where it points depends entirely on where the function is called.

1. Default binding

function foo(){ var a = 1 ; // Local variable console.log(this.a); } var a = 10; // the global variable foo(); //window.foo()Copy the code

2. Implicit binding

var a = 10; Function foo(){var a = 1; // Local variable console.log(this.a); } var obj = { a : 20, foo : foo } obj.foo(); //window.obj.foo()Copy the code

3. Bind the apply,call, and bind functions to change this reference

(1) Call var box= document.getelementById ('box') box-onclick = function(){console.log(this) // Call var box= document.getelementById ('box') box-onclick = function(){console.log(this BoxFn (params1,params2,params3){console.log(this)} boxFn() boxfn.call (this,1,2,3) //call changes this to point to the box element}Copy the code
Var applayObj1={name:' '} var applayObj={name:' ', applayFun(param1,param2,param3){ console.log(this.name) } } var applayfun2=applayObj.applayFun applayObj.applayFun() / / window. ApplayObj. ApplayFun () applayfun2. Apply (this, [1, 2, 3]) / / window applayfun2. Apply (this, [1, 2, 3]) Applayfun2. Apply (applayObj1, [1, 2, 3]) / / the window. The applayfun2. Apply (applayObj1, [1, 2, 3])Copy the code
Var applayObj1={name:' this'} var bindObj={title:' this', bindFun(){ console.log(this) } } bindObj.bindFun() var aa=bindObj.bindFun aa() aa.bind(applayObj1)()Copy the code

4. The new binding

Objects out of new have the following new features:

Create a new object. (2) Set the __proto__ attribute of this new object to the prototype attribute of the original function. (that is, inherits the prototype of the original function) (3) assigns the scope of the constructor to the new object (thus this refers to the new object) (4) returns the new object. (The underlying mechanism returns a new object.)Copy the code
var blogA='123' function blog(){ this.blogA='456' this.blogFn=function(){ console.log(this.blogA) } } var newblogObj=new  blog() newblogObj.blogFn() console.log(newblogObj)Copy the code

Arrow function this binding

(1) The this object inside the function is the object at which it is defined, not the object at which it is used.

    var a=12
	function foo(){	
		this.a=13
	    return ()=>{
	      console.log(this.a)
	    }
	}
    let newFoo=new foo()   
	newFoo() 
	

	var b='666'    
	function foo2(){
        console.log(this)
	    return ()=>{
	        console.log(this.b)
	    }
	}    
	var baz=foo2()
	baz();  
Copy the code

(2) The arrow function can bind this in setTimeout to the scope in which it was defined, rather than pointing to the scope in which the runtime was defined

function Timer() { this.s1 = 0; this.s2 = 0; Console. log(this) // Arrow function setInterval(() => this.s1++, 1000); SetInterval (function () {this.s2++; setInterval(function () {this.s2++; //this is window}, 1000); } var timer = new Timer(); setTimeout(() => console.log('s1: ', timer.s1), 3100) setTimeout(() => console.log('s2: ', timer.s2), 3100)Copy the code
(3). Arrow function this cannot be modifiedCopy the code
	var obj = {
      b : 999
   }
  var b='666'    
  function foo2(){
      console.log(this)
      return ()=>{
        console.log(this.b)
      }
  }    
  var baz=foo2()
  
  baz();  
  
  baz.call(obj)
  
Copy the code

This refers to and inherits

Function Parent (name,sex){this.name = name; this.sex = sex; Function (){console.log(" name :" + this.name + "gender" + this.sex)} // Declare functions that inherit from Parent Function Worker(name,sex,job){// Change Parent's this to console.log(this) Parent. Call (this,name,sex) this.job = job; } worker. prototype=Parent. Prototype var wk = new Worker(" small "," male "," programmer ") console.log(wk.name); console.log(wk.sex); console.log(wk.job); wk.show()Copy the code