[JS]this的多种嘴脸以及call和apply的相同点差异点

• this的多种嘴脸

  • 第一定律：(1) 以方法方式调用时,this是绑定宿主对象

     var obj = {
       		method:() =>{
       		 	console.log(this) 
      	 	}
       }
      obj.method();  // obj
    

  • (2) 以函数方式调用时,this是window对象 (调用全局函数)

    function fun(){
    	console.log(this)   
    }
    fun()  // window
    

    全局变量或函数都相当于window对象的属性,这里 this 绑定到 window 对象就显而易见，很容易理解了。相当于方法调用模式的一个特例，不违背第一定律

  • (3) 以构造函数方式调用时,this是创建的新对象

    	function Person(name, age){
    		this.name = name;
    		this.age = age;
    	}
    	var john = new Person('John', 38);  //this => john
    

    使用 new 调用，就会创建一个连接到该函数原型 prototype 属性的新对象，再把 this 绑定到该对象

  • (4) 以call和apply调用时,this是传入的那个对象 (第一个参数)

    	// call方式
       	function fun (a,b){
       		console.log(this)
       	}
       	let obj = {
       		...
       	}
       	fun.call(obj,1,2)  // this => obj 这个参数
    

    	// apply方式
       	function fun (a,b){
       		console.log(this)
       	}
       	let obj = {
       		...
       	}
       	fun.apply(obj,[1,2])  // this => obj 这个参数
    

    apply 和 call 的区别

    • apply要求第二个参数必须是数组
    • call则没这么严格，第二个参数是函数的入参(第一个第二个第三个第四个第五个第六个)

微信扫一扫,免费保护车主号码隐私的挪车码即可到手免费使用