关于this的一些学习笔记

关于可以指定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