apply、call、bind改变this指向

JavaScript 专栏收录该内容
12 篇文章 0 订阅

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值