this的使用

目的：
操作步骤：
this的用法

目的：

this的一些用法

操作步骤：

this的用法

默认绑定: 全局作用域或者普通函数中this指向全局对象window.严格模式下this指向undefined

    //直接打印
    console.log(this) //window
    
    //function声明函数
    function foo(){console.log(this)}
    foo(); //window
    
    
    //function声明函数赋给变量
    let bar = function () {console.log(this)}
    bar() //window
    
    //自执行函数
    (function () {console.log(this)})(); //window

隐式绑定: 方法调用中谁调用this指向谁

    //对象方法调用
    let person = {
        run: function () {console.log(this)}
    }
    person.run() // person
    
    
    //事件处理函数中, this永远指向触发事件的元素
    //事件绑定
    let btn = document.querySelector("button")
    btn.onclick = function () {
        console.log(this) // btn
    }
    //事件监听
    let btn = document.querySelector("button")
    btn.addEventListener('click', function () {
       console.log(this) //btn
    })
    //事件代理
    
    
    //jquery的ajax
     $.ajax({
        self: this,
        type:"get",
        url: url,
        async:true,
        success: function (res) {
            console.log(this) // this指向传入$.ajax()中的对象
            console.log(self) // window
        }
       });
     //这里说明以下，将代码简写为$.ajax（obj） ，this指向obj,在obj中this指向window，因为在在success方法中，独享obj调用自己，所以this指 向obj
     
     
     //隐式绑定丢失:??
     实际上是函数调用时(赋值给变量), 并没有上下文对象, 只是对函数的引用, 所以会导致隐式丢失
     同时, 隐式丢失还会发生在回调函数中.
     

new 绑定: 在构造函数或者构造函数原型对象中this指向构造函数

     //不使用new指向window
     function Person (name) {
         console.log(this) // window
         this.name = name;
     }
     Person('李四') //跟普通函数调用一致
    
     //使用new
     function Person (name) {
           this.name = name
           console.log(this) //people
           self = this
       }
       let people = new Person('李四')
       console.log(self === people) //true
     //这里new改变了this指向，将this由window指向Person的实例对象people

显示绑定

在某个对象上强制调用对象,从而将this绑定在这个函数上.

通过apply, call, bind将函数中的this绑定到指定对象上.
- bind()优先级最高 - 复制一个一样的函数出来,然后新的函数内的this永远指向参数对象.
- call()和apply()借调,this是指定的对象.
- call()和apply()区别 - 函数的实参传递的方式不同,call是一个一个参数的传递,apply是传递一个数组,js引擎会自动拆封.
```
  	function foo(a, b){
       	console.log(this, a, b);
 	 	}

  	let arr = [20, 30, 40];
  	foo.call({}, arr[0], arr[1]);
  	foo.apply({}, arr); //可以传一个数组
```
箭头函数
- 没有自己的this, 找到的是上一级不是箭头函数或全局的this.
- 箭头函数的this一旦绑定了上下文, 就不会被代码改变

	let obj = {
    	age: 20,
    	foo: function(){
        	setTimeout(() => {
            	console.log(this)  //obj
        	})
    	}
	}
	obj.foo();

	function foo() {
 	 	return () => {
   	 	console.log(this.a);
  		};
	}
	let obj1 = {
  		a: 2
	};
	let obj2 = {
  		a: 22
	};
	let bar = foo.call(obj1); // foo this指向obj1
	bar.call(obj2); //2 这里执行箭头函数, 绑定this指向到obj2失败

this的使用

目的：

操作步骤：

this的用法

Similar Posts

Comments