1.什么是this
在 JavaScript 中,this 是一个关键字,它指向当前执行代码的对象。this 的值取决于当前代码在哪里执行,可以是全局作用域、函数作用域、对象的方法中。
在全局作用域中,this 指向全局对象 window。
在函数作用域中,this 的值取决于函数是如何调用的。如果函数是作为普通函数调用的,this 指向全局对象 window;如果函数是作为对象的方法调用的,this 指向该对象;如果函数使用 call、apply 或 bind 方法调用,可以指定 this 的值。
在对象的方法中,this 指向该对象。
需要注意的是,this 的值是动态的,它随着代码的执行而变化。因此,在编写 JavaScript 代码时,需要注意 this 的使用方式,以确保代码的正确性和可读性。
2.this的多种用法
1.1 作为函数的参数
在函数中,this 可以作为参数传递进去,用于在函数内部引用外部的对象
function myFunction(obj) {
console.log(obj);
}
var obj = {name: 'John'};
myFunction(obj);
1.2 作为函数的返回值
在函数中,this 可以作为返回值返回,返回当前对象
function myFunction() {
return this;
}
var obj = {name: 'John'};
var result = myFunction.call(obj);
console.log(result);
1.3 作为对象的属性
在对象中,this 可以作为属性名使用,用于定义对象的属性
var myObj = {
name: 'John',
age: 30,
sayHello: function() {
console.log('Hello, my name is ' + this.name + ', and I am ' + this.age + ' years old.');
}
};
myObj.sayHello();
1.4 作为对象的方法
在对象中,this 可以作为方法名使用,用于定义对象的方法
var myObj = {
name: 'John',
sayHello: function() {
console.log('Hello, my name is ' + this.name + '.');
}
};
myObj.sayHello();
1.5 作为全局对象
在全局作用域中,this指向全局对象windows
console.log(this); // 输出全局对象 window
1.6 作为构造函数的this
在使用 new 关键字创建对象时,this 指向新创建的对象
function Person(name) {
this.name = name;
}
var john = new Person('John');
console.log(john.name); // 输出 John
1.7 作为事件处理函数的this
在事件处理函数中,this 指向触发事件的元素
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
console.log(this); // 输出触发事件的元素
});
3.call(),apply(),bind() 方法
1.1 call()
在 JavaScript 中,call() 方法是 Function 对象的一个方法,用于调用一个函数,并将指定的对象作为函数中 this 关键字的值。
<button class="btn">点击</button>
call方法
var btn = document.querySelector('.btn');
function show(arr1,arr2,arr3){
console.log(arr1,arr2,arr3);
}
btn.onclick = function(){
show.call(this,1,2,3);
}
1.2 apply()
在 JavaScript 中,apply() 方法是 Function 对象的一个方法,用于调用一个函数,并将一个类数组对象作为函数中 this 关键字的值,同时传递一个参数列表。
<button class="btn">点击</button>
var btn = document.querySelector('.btn');
function show(arr1,arr2,arr3,arr4){
console.log(arr1,arr2,arr3,arr4);
// console.log(this);
}
btn.onclick = function(){
show.apply(this,[1,2,3,4]);//this指向btn
}
1.3 bind()
bind()
方法是JavaScript中的一个函数方法,它返回一个新函数,该函数具有与原始函数相同的函数体和作用域,但是值被绑定到了指定的对象上,同nd() 调用时预设一些参数
<button class="btn">点击</button>
var btn = document.querySelector('.btn');
function show(arr1,arr2,arr3){
console.log(arr1,arr2,arr3);
}
btn.onclick = function(){
show.bind(this,1,2,3)();//()表示立即执行
}
1.4 call、apply、bind方法区别
call()、apply() 和 bind() 都是 JavaScript 中用于改变函数执行上下文的方法。
它们的区别如下:
- 参数的传递方式:
call() 和 apply() 方法都是通过将参数作为数组传递给函数来改变函数的执行上下文,而 bind() 方法则是通过返回一个新函数来改变函数的执行上下文。
- 参数的个数:
call() 和 apply() 方法的参数个数是固定的,必须传入与函数定义时的参数个数相同的参数,而 bind() 方法可以传入任意个数的参数。
- 参数的顺序:
call() 和 apply() 方法的参数顺序必须与函数定义时的参数顺序相同,而 bind() 方法的参数顺序可以随意。
- 返回值:
call() 和 apply() 方法的返回值是函数执行的结果,而 bind() 方法的返回值是一个新函数。
综上所述,call() 和 apply() 方法更适合在函数执行时改变上下文,而 bind() 方法则更适合在函数定义时就绑定上下文。