this指向的疑难点
改变this指向的三种方法,call()、apply()、bind()及各自的用法和应用场景
<script>
//1 call()方法
const obj={
name:'张三',
age:18
}
function fn(a,b){
console.log("call方法de this指向",this);//Object
console.log(a+b);//9
}
fn.call(obj,3,6)//调用函数并改变this指向
// call 的主要作用可以实现继承
function Person(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender
}
function Student(name,age,gender){
Person.call(this,name,age,gender)
}
var s=new Student("张三",18,"male");
console.log(s,typeof s);//Student {name: "张三", age: 18, gender: "male"} "object"
/* ---------------------------------------------------------------- */
//2 apply()方法
function fn2(arr){
console.log(this);//Object
console.log(arr,typeof arr);//1 "number"注意此处*****************************
console.log([1,2,3]);//(3) [1, 2, 3]
}
fn2.apply(obj,[1,2,3]) // (1). 也是调用函数 第二个可以改变函数内部的this指向
// (2). 但是他的参数必须是数组(伪数组)
// (3). apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值********
// Math.max();
var numarr=[3,6,8,68,86]
var max=Math.max.apply(Math,numarr)
var min = Math.min.apply(Math,numarr)
console.log(max,min);//86 3
/* ---------------------------------------------------------------- */
//3 bind()方法
function fn3(a,b){
console.log(this);//{name: "张三", age: 18}
console.log(a+b);//9
}
//1. 不会调用原来的函数 可以改变原来函数内部的this 指向
// 2. 返回的是原函数改变this之后产生的新函数
var newfn=fn3.bind(obj,3,6);//用一个新函数来接收
newfn();
// 应用:3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
</script>
【call apply bind 总结】
【相同点: 】
都可以改变函数内部的this指向.
【区别点: 】
call 和 apply 会调用函数, 并且改变函数内部this指向.
call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式 apply 必须数组形式[arg]
bind 不会调用函数, 可以改变函数内部this指向.
【主要应用场景: 】
call 经常做继承.
apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.