JavaScript之call理解

jiezi

5 年前

call()方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call()方法接受的是 一个参数列表 ，而 apply() 方法接受的是 一个包含多个参数的数组 。
JavaScript 中的每一个 Function 对象都有一个 apply() 方法和一个 call()方法，它们的语法分别为：

JavaScript Demo: Function.call()

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);    // 输出: cheese

浅显易懂的理解，示例中表达式 Product.call(this, name, price)就等价于

this.Product(name, price)

this 在此处显然指向对象 Food，进一步代入 this 指向对象和参数为

Food.Product('cheese', 5)

fun.call(thisArg, arg1, arg2, ...)

语法个人理解为：
fun.call(thisArg, arg1, arg2, …) 就相当于 thisArg.fun(arg1, arg2, …)
而不论 this.Arg 初始指向对的是否为对象

参数：

thisArg
在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数在 [非严格模式]的 this 值会自动指向全局对象（浏览器中就是 window 对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。arg1, arg2, …
指定的参数列表。

返回值：

使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

描述：

call()允许为不同的对象分配和调用属于一个对象的函数 / 方法。call()提供新的 this 值给当前调用的函数 / 方法。你可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

使用 call 方法调用父构造函数
在一个子构造函数中，你可以通过调用父构造函数的 call 方法来实现继承，类似于 Java 中的写法。下例中，使用 Food 和 Toy 构造函数创建的对象实例都会拥有在 Product 构造函数中添加的 name 属性和 price 属性, 但 category 属性是在各自的构造函数中定义的。

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

使用 call 方法调用匿名函数
在下例中的 for 循环体内，我们创建了一个匿名函数，然后通过调用该函数的 call 方法，将每个数组元素作为指定的 this 值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个 print 方法，这个 print 方法可以打印出各元素在数组中的正确索引号。当然，这里不是必须得让数组元素作为 this 值传入那个匿名函数（普通参数就可以），目的是为了演示 call 的用法。

var animals = [{ species: 'Lion', name: 'King'},
  {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {(function(i) {this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ':' + this.name);
    }
    this.print();}).call(animals[i], i);
}

使用 call 方法调用函数并且指定上下文的 ‘this’
在下面的例子中，当调用 greet 方法的时候，该方法的 this 值会绑定到 obj 对象。

function greet() {var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
  console.log(reply);
}

var obj = {animal: 'cats', sleepDuration: '12 and 16 hours'};

greet.call(obj);  // cats typically sleep between 12 and 16 hours

使用 call 方法调用函数并且不指定第一个参数（argument
在下面的例子中，我们调用了 display 方法，但并没有传递它的第一个参数。如果没有传递第一个参数，this 的值将会被绑定为全局对象。

var sData = 'Wisen';

function display() {console.log('sData value is %s', this.sData);
}

display.call();  // sData value is Wisen

此处的理解是：display.call() 就相当于 this.display()，非严格模式下，此处 this 显然指向全局 window，也就等价于 window.dispaly()，也就是调用了 display()。
严格模式下，this 的值将会是 undefined。见下文。

'use strict';

var sData = 'Wisen';

function display() {console.log('sData value is %s', this.sData);
}

display.call(); // Cannot read the property of 'sData' of undefined

我是 Cloudy，年轻的前端攻城狮一枚，爱专研，爱技术，爱分享。
个人笔记，整理不易，感谢阅读、点赞和收藏。
文章有任何问题欢迎大家指出，也欢迎大家一起交流前端各种问题！

JavaScript之call理解

Function.prototype.call()

概念

语法

示例