关于this的一些学习笔记

Posted 2022-12-08 ReedSun

关于可以指定this的apply()、call()函数

• apply()和call()函数都可以 指定this值和参数值的情况下调用某个函数。
• call()和apply()的作用一样，区别在于提供给原函数的参数的方式不一样
• • apply()函数只接受两个参数，提供给原函数的参数以数组或类数组对象的形式存在
• • 而call()接收无限个参数， 第二个参数及其后面的参数就是提供给原函数的参数。

例子

通过例子，我觉得可以更好的理解this

第一个例子：此时this是john对象

var john =  
  firstName: "John" 

function func()  
  alert(this.firstName + ": hi!")

john.sayHi = func
john.sayHi()     //  弹出John：hi！

第二个例子：this是window

func()   //  弹出window对象

function func()  
  alert(this)

• 因为在函数func()被直接调用时，this绑定到全局对象。在浏览器中，window 就是该全局对象

第三个例子：监听函数的this是被监听的元素

function fn0()
    function fn()
        console.log(this);
    
    fn();


fn0();  //  输出window对象


document.addEventListener('click', function(e)
    console.log(this);   //  输出document对象
    setTimeout(function()
        console.log(this);   //  输出window对象
    , 200);
, false);

第四个例子： 使用call修改this

var john =  
  firstName: "John" 


function func()  
  alert( this.firstName ) 

func.call(john)    //  弹出John

• func()函数通过call()函数调用，此时this为John对象，john.firstName存在，输出”John”

第五个例子：使用call修改this

var john =  
  firstName: "John",
  surname: "Smith"


function func(a, b)  
  alert( this[a] + ' ' + this[b] )

func.call(john, 'firstName', 'surname')   //  输出 John Smith