本文章记录的是JS中不同函数内部的this的指向问题以及几种改变this指向的方法,希望可以帮助到大家。
不同函数内部this的指向
- 普通函数
function fn() {
console.log('普通函数的this' + this);
}
window.fn();
普通函数this的指向为window
- 立即执行函数
(function() {
console.log('立即执行函数的this' + this);
})();
立即执行函数 this也是指向window
- 定时器函数
window.setTimeout(function() {
console.log('定时器的this:' + this);
}, 1000);
定时器函数 this 指向的还是window
- 对象的方法
var star = {
show: function() {
console.log('对象方法的this:' + this);
}
}
star.show();
对象的方法this的指向是star
- 构造函数
function Star() {};
Star.prototype.say = function() {
}
var yy = new Star();
构造函数this指向实例对象,原型对象里面的this指向的也是实例对象
- 绑定事件函数
var btn = document.querySelector('button');
btn.onclick = function() {
console.log('绑定事件函数的this:' + this);
}
绑定事件函数this指向的是函数的调用者,即btn这个按钮
改变this指向的方法
- call方法
var star = {
name: 'Ted'
}
function fn(a, b) {
console.log(this);
console.log(a + b);
};
fn.call(star, 1, 2);
function Father(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}
function Son(uname, age, sex) {
Father.call(this, uname, age, sex);
}
var son = new Son('yy', 20, '男');
console.log(son);
1.call 第一可以调用函数,第二可以改变函数内的this 指向
2.call 的主要作用可以实现继承
- apply方法
var star = {
name: 'Ted'
};
function fn(arr) {
console.log(this);
console.log(arr);
};
fn.apply(star, ['yy']);
var arr = [1, 66, 3, 99, 4];
var arr1 = ['yy', 'kk'];
var max = Math.max.apply(Math,arr);
var min = Math.min.apply(Math,arr);
console.log(max,min);
console.log(null,arr1);
- 第一可以调用函数,第二可以改变函数内部的this指向
2. 但是他的参数必须是数组(伪数组)
3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值
- bind方法
var star = {
name: 'Ted'
}
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(star, 1, 2);
f();
var btn1 = document.querySelector('button');
btn1.onclick = function() {
this.disabled = true; // 这个this 指向的是 btn 这个按钮
// var that = this;
setTimeout(function() {
// that.disabled = false; // 定时器函数里面的this 指向的是window
this.disabled = false; // 此时定时器函数里面的this 指向的是btn
}.bind(this), 3000); // 这个this 指向的是btn 这个对象
}
- 不会调用原来的函数,可以改变原来函数内部的this 指向
2.返回的是原函数改变this之后产生的新函数
3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind