apply、call、bind改变this指向

apply和call改变this指向

apply和call方法也是函数的调用方式
apply和call如果没有传入参数,或者是传入的null,那么该方法的函数对象中的this就是默认的window
apply和call传入参数的写法不一样,但是效果一样

 function add(x,y){
    
    
     console.log('result: '+(x+y)+this);
 }
 
 add(1,2);//result: 3[object Window]

 add.apply();//result: NaN[object Window]
 add.call();//result: NaN[object Window]
function add(x,y){
    
    
    console.log('result: '+(x+y)+this);
}

var obj={
    
    
    name:'lanlan',
    color:'blueviolet'
}
add.apply(obj,[6,8]);//result: 14[object Object]
add.call(obj,6,8);//result: 14[object Object]
function Person(name){
    
    
    this.name=name;
}
Person.prototype.add=function(x,y){
    
    
    console.log(this.name);
    console.log(x+y);
}
var per=new Person('amethyst');

function Student(name){
    
    
    this.name=name;
}
var stu=new Student('lanlan');

per.add.apply(stu,[100,200]);//lanlan 300
per.add.call(stu,100,200);//lanlan 300
function Person(name){
    
    
    this.name=name;
}
Person.prototype.put=function(){
    
    
    console.log(this.name);
}

function Dog(name){
    
    
    this.name=name;
}
var per=new Person('amethyst');
var dog=new Dog('erHa');

per.put();//amethyst
per.put.apply(dog);//erHa

bind方法

apply和call方法是在调用的时候改变this指向
bind方法是在复制的时候改变的this指向,参数可以在复制的时候传进去,也可以在复制之后传进去

function add(x,y){
    
    
    console.log((x+y)+this.name);
}
var f1=add.bind(null);
f1(10,20);//30

function Person(name){
    
    
    this.name=name;
}
Person.prototype.code=function(){
    
    
    console.log('love coding');
}

var per=new Person('amethyst');
var f2=add.bind(per,10,20);
f2();//30amethyst
function Animal(color){
    
    
   this.color=color;
}
Animal.prototype.put=function(){
    
    
   console.log(this.color);
}

function Dog(color){
    
    
   this.color=color;
}

var animal=new Animal('blueviolet');
var dog=new Dog('blue');

var f3=animal.put.bind(dog);
f3();//blue

函数名字.bind(对象,参数1,参数2,…)的返回值是复制之后的函数
没传参或者参数为null的时候this指向window

猜你喜欢

转载自blog.csdn.net/Amethystlry/article/details/114413912