Table of contents
1. Common points: consistent functions
1. Modify this pointer through call and execute immediately
2. Modify this pointer through apply and execute immediately
3. Modifying this pointer through bind will not be executed immediately
1. If call has multiple parameters, you need to write them one by one.
2. If bind has multiple parameters, you need to write them one by one.
3.The second parameter of apply is an array
3. Call usage scenarios (except for scenarios that can only be used by apply and bind)
1. Common points: consistent functions
You can change the this pointer in the function body .
Syntax: function.call() function.apply() function.bind()
2. Difference:
1. call,apply can be executed immediately. bind will not be executed immediately because bind returns a function that needs to be added () for execution.
<script>
var str = '你好'
var obj = {str:'这是obj对象内的str'};
function fun(){
console.log(this,this.str);
}
fun();
</script>Analysis: Yi knows that this here points to window, so this.str is hello.
What if you modify this pointer through call, apply, and bind?
1. Modify this pointer through call and execute immediately
<script>
var str = '你好'
var obj = {str:'这是obj对象内的str'};
function fun(){
console.log(this,this.str);
}
fun.call(obj); //立即执行
fun();
</script>result:
Analysis: The modification is successful. If not, the result of this.str should be: Hello
2. Modify this pointer through apply and execute immediately
<script>
var str = '你好'
var obj = {str:'这是obj对象内的str'};
function fun(){
console.log(this,this.str);
}
fun.apply(obj); //立即执行
fun();
</script>result:
3. Modifying this pointer through bind will not be executed immediately
<script>
var str = '你好'
var obj = {str:'这是obj对象内的str'};
function fun(){
console.log(this,this.str);
}
fun.bind(obj); //没有立即执行
console.log(fun.bind(obj)); //查看返回结果是一个函数
fun();
</script>result:
Executed via join():
<script>
var str = '你好'
var obj = {str:'这是obj对象内的str'};
function fun(){
console.log(this,this.str);
}
fun.bind(obj)();
fun();
</script>result:
2: The parameters are different: the first parameter is the new object pointed to by this. The second parameter of apply is an array. If call and bind have multiple parameters, they need to be written one by one.
1. If call has multiple parameters, you need to write them one by one.
<script>
var str = '你好'
var obj = {str:'这是obj对象内的str'};
function fun(name,age){
this.name = name;
this.age = age;
console.log(this,this.str);
}
fun.call(obj,'张三',99); //参数'张三'和99 传入 fun函数里面
</script>result:
2. If bind has multiple parameters, you need to write them one by one.
<script>
var str = '你好'
var obj = {str:'这是obj对象内的str'};
function fun(name,age){
this.name = name;
this.age = age;
console.log(this,this.str);
}
fun.bind(obj,'张三',99)();
</script>
3.The second parameter of apply is an array
<script>
var str = '你好'
var obj = {str:'这是obj对象内的str'};
function fun(name,age){
this.name = name;
this.age = age;
console.log(this,this.str);
}
fun.apply(obj,['张三',99]);
</script>
3.Usage scenarios
1.apply usage scenarios
eg: Array [1,36,2,7,321], find its maximum value?
<script>
let arr = [1,36,2,7,321];
let re = Math.max.apply(null,arr);
console.log(re); //321
</script>Analysis: Math.max(1,36,2,7,321) can get the maximum value, but it is to find the maximum value in the array, so it can be thought that the second parameter of apply requires an array to solve the problem. Why is the first parameter here filled in with null? Because the application of Math.max here is to determine the maximum value of the array arr, and it is not necessary to study the this pointer.
2.bind usage scenarios
<body>
<h1 id="h1">ish1</h1>
<button id="btn">1111111</button>
<script>
let h1 = document.querySelector('#h1');
let btn = document.querySelector('#btn');
btn.onclick = function(){
console.log(this.id); // btn
}
</script>
</body>Analysis: This here points to btn, because it is a click event bound to btn, but if you want this to point to h1, and then click the button to print out the id of h1, you need to change the point of this.
1. Choose to use arrow functions
<body>
<h1 id="h1">ish1</h1>
<button id="btn">1111111</button>
<script>
let h1 = document.querySelector('#h1');
let btn = document.querySelector('#btn');
btn.onclick = ()=>{
console.log(this);//window
console.log(this.id);// undefined
}
</script>
</body>Analysis: At this time, this pointing to window cannot meet the requirement of this pointing to h1.
2.用call / apply
<body>
<h1 id="h1">ish1</h1>
<button id="btn">1111111</button>
<script>
let h1 = document.querySelector('#h1');
let btn = document.querySelector('#btn');
btn.onclick = function(){
console.log(this);
console.log(this.id);
}.apply(h1);
</script>
</body>Analysis: It is possible to realize that this points to h1, but it cannot be realized until the button is clicked to print out the id of h1. The id of h1 is printed directly before clicking the button.
3. Use bind
<body>
<h1 id="h1">ish1</h1>
<button id="btn">1111111</button>
<script>
let h1 = document.querySelector('#h1');
let btn = document.querySelector('#btn');
btn.onclick = function(){
console.log(this);
console.log(this.id);
}.bind(h1);
</script>
</body>Analysis: You can realize this pointing to h1, and you can also click the button to print out the id of h1. Clicking the button here is equivalent to adding () to the function returned by bind, which will only be executed when clicked.