1, this point
The point of this is determined when we call the function, and the difference in the calling method determines the point of this.
Generally point to our caller.
| Call method | this points to |
|---|---|
| Ordinary function call | window |
| Constructor call | The methods in the prototype object of the instance object also point to the instance object |
| Object method call | The object to which the method belongs |
| Event binding method call | Bound event object |
| Timer function | window |
| Execute function immediately | window |
2. Change the this point inside the function
js specifically provides us with some function methods to help us more elegantly deal with the problem of this pointing inside the function. There are three commonly used methods: bind(), call(), and apply()
1、call()
The call() method calls an object, which is simply understood as the way to call a function, but it can change the this point of the function (inheritance can be achieved).
fun.call(thisArg,arg1,arg2)
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a + b);
};
fn.call(o, 1, 2);
// call 第一个可以调用函数 第二个可以改变函数内的this 指向
// call 的主要作用可以实现继承
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('刘德华', 18, '男');
console.log(son);
2、apply()
The apply() method calls a function, which is simply understood as the way to call the function, but it can change the this point of the function.
fun.apply(thisArg,[argsArray])
- thisArg: this value specified when the fun function is running
- argsArray: The passed value must be included in the array
- The return value is the return value of the function, because it is the calling function
// 2. apply() 应用 运用的意思
var o = {
name: 'andy'
};
function fn(arr) {
console.log(this);
console.log(arr); // 'pink'
};
fn.apply(o, ['pink']);
// 1. 也是调用函数 第二个可以改变函数内部的this指向
// 2. 但是他的参数必须是数组(伪数组)
// 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值
// Math.max();
var arr = [1, 66, 3, 99, 4];
var arr1 = ['red', 'pink'];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);
3、bind()
The bind() method does not call the function, but can change the internal this to point to
fun.bind(thisArg,arg1,arg2,...)
If there is a function we don't need to call immediately, but we want to change the this point inside this function, use bind at this time
- The return value is a copy of the original function modified by the specified this value and initialization parameters
// <button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
// 改变函数内this指向 js提供了三种方法 call() apply() bind()
// 3. bind() 绑定 捆绑的意思
var o = {
name: 'andy'
};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2);
f();
// 1. 不会调用原来的函数 可以改变原来函数内部的this 指向
// 2. 返回的是原函数改变this之后产生的新函数
// 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
// 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
// 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 这个对象
// }
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
this.disabled = true;
setTimeout(function() {
this.disabled = false;
}.bind(this), 2000);
}
}
</script>