写代码啦
call、apply、bind 的用法分别是什么?
回复数(0) 浏览数(24)
{{topic.upvote_count || 0}} 编辑 回复

call、apply、bind都是改变this指向的方法
call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的数组。
bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
bind的参数可以在函数执行的时候再次添加。

function.call(thisArg, arg1, arg2, ...)
func.apply(thisArg, [argsArray])
function.bind(thisArg[, arg1[, arg2[, ...]]])

call的例子(非严格模式下thisArg若不传|null|nudefined,this都指向window)、(严格模式thisArg不传则为undefind,传了的话this就指向该参,即使是null或undefined)

function Product(name, price) {
  this.name = name;
  this.price = price;
}
function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}
console.log(new Food('cheese', 5).name);
// expected output: "cheese"

capply的例子
~~~
const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7
~~~
bind的例子

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

综合对比例子 1

var name = '佩奇',age = 6;
var obj = {
    name = '浩克',
    objAge: this.age,
    myLove:function(){
        console.log( this.name +"年龄"+ this.age);
    }
}
var mw= {
    name : '灭霸',
    age: 88
}
obj.myLove.call(mw); //灭霸年龄88
obj.myLove.apply(mw); //灭霸年龄88
obj.myLove.bind(mw)(); // 灭霸年龄88

bind返回的是一个新的函数,必须调用它才会被执行。
综合对比例子 2


var name = '佩奇',age = 6;
var obj = {
    name = '浩克',
    objAge: this.age,
    myLove:function(){
        console.log( this.name +"年龄"+ this.age +"来自" + xxxx + "去往" + yyyy );
    }
}
var mw= {
    name : '灭霸',
    age: 88
}
obj.myLove.call(mw,'成都','上海'); //灭霸年龄88来自成都去往上海
obj.myLove.apply(mw,['成都','上海']); //灭霸年龄88来自成都去往上海
obj.myLove.bind(mw,'成都','上海')(); // 灭霸 年龄88 来自成都去往上海
obj.myLove.bind(mw,['成都','上海'])(); // 灭霸 年龄88 来自成都上海去往undefined(因为这时第一个参为数组,而yyyy缺省即为undefind)
{{topic.upvote_count || 0}}

call、apply、bind都是改变this指向的方法
call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的数组。
bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
bind的参数可以在函数执行的时候再次添加。

function.call(thisArg, arg1, arg2, ...)
func.apply(thisArg, [argsArray])
function.bind(thisArg[, arg1[, arg2[, ...]]])

call的例子(非严格模式下thisArg若不传|null|nudefined,this都指向window)、(严格模式thisArg不传则为undefind,传了的话this就指向该参,即使是null或undefined)

function Product(name, price) {
  this.name = name;
  this.price = price;
}
function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}
console.log(new Food('cheese', 5).name);
// expected output: "cheese"

capply的例子
~~~
const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7
~~~
bind的例子

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

综合对比例子 1

var name = '佩奇',age = 6;
var obj = {
    name = '浩克',
    objAge: this.age,
    myLove:function(){
        console.log( this.name +"年龄"+ this.age);
    }
}
var mw= {
    name : '灭霸',
    age: 88
}
obj.myLove.call(mw); //灭霸年龄88
obj.myLove.apply(mw); //灭霸年龄88
obj.myLove.bind(mw)(); // 灭霸年龄88

bind返回的是一个新的函数,必须调用它才会被执行。
综合对比例子 2


var name = '佩奇',age = 6;
var obj = {
    name = '浩克',
    objAge: this.age,
    myLove:function(){
        console.log( this.name +"年龄"+ this.age +"来自" + xxxx + "去往" + yyyy );
    }
}
var mw= {
    name : '灭霸',
    age: 88
}
obj.myLove.call(mw,'成都','上海'); //灭霸年龄88来自成都去往上海
obj.myLove.apply(mw,['成都','上海']); //灭霸年龄88来自成都去往上海
obj.myLove.bind(mw,'成都','上海')(); // 灭霸 年龄88 来自成都去往上海
obj.myLove.bind(mw,['成都','上海'])(); // 灭霸 年龄88 来自成都上海去往undefined(因为这时第一个参为数组,而yyyy缺省即为undefind)
24
回复 编辑