JS的call方法

概述

foo.call(this, args...),指明foo函数或方法的this和参数,然后运行foo

1
2
3
4
5
6
7
8
function Animal(name) {
console.log(`animal's name is ${name}, color is ${this.color}`);
}
function Dog() {
this.color = "dog's color is white";
Animal.call(this, "dog");
}
new Dog(); // 打印 "animal's name is dog, color is dog's color is white"

为自己打call

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Function.prototype.mycall = function(ctx) {
// ctx也就是传过来的this(同arguments[0]),传null则为window(nodejs可以用global)
ctx = ctx || (typeof window === "undefined" ? global : window);
ctx.foo = this; // 这个this是调用mycall的那个函数或方法

let args = [];
for (let i = 1; i < arguments.length; i++) {
args.push(arguments[i]);
}
ctx.foo(...args);
delete ctx.foo;
}

function Animal2(name) {
console.log(`animal's name is ${name}, color is ${this.color}`);
}

function Dog2() {
this.color = "black";
Animal2.mycall(this, "dogdog");
}
new Dog2(); // 打印 "animal's name is dogdog, color is black"

let Cat = {
color: "white"
}
Animal2.mycall(Cat, "catcat"); // 打印 "animal's name is catcat, color is white"

apply

上面的call,调用的时候,需要对应每个参数,而apply一共只有两个参数,第一个和call是一样的,而第二个参数传的是参数数组,这用于不确定参数时很方便。

1
2
3
4
5
6
7
8
9
10
function fn(arg1, arg2) {
console.log.call(console, arg1, arg2);
}
fn("what", 666); // 打印 "what 666"

function fn2() {
console.log.apply(console, arguments);
}
fn2(12, "haha", 1234); // 打印 "12 haha 1234"
fn2(12, "haha", 1234, "what", "why"); // 打印 "12 haha 1234 what why"

总的

总的来说,callapply都是为了动态改变this的指向。

打赏
  • © 2016-2020 留叶
  • Powered by Hexo Theme Ayer
    • PV:
    • UV:

请我喝杯咖啡吧~

支付宝
微信