注:本篇文章示例来源于MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call
目录
使用 call 方法调用函数并且不指定第一个参数(argument)
不知道各位是否看到大佬写的代码,里面的代码很是简洁,但是this出现的很多,上下文的调用,this的指向我们被绕的头晕,但是大佬却信手拈来,我觉得其中call的作用功不可没,可见想要js进阶,精通call的使用是不可或缺的。那就让我们来解开call的神秘面纱吧。
call详解
call的定义
PS(很多官方资料叙述的call都是有些抽象的,因为他们必须保证他们语言的严谨性和准确性,但是我就不一样了,咱也不是官方,咱只需要叙述的明白,大家里脊即可。)
我的理解,**call就是为了将本身this指向改变为新对象的值**。无论是继承还是添加属性,都是利用了其this指向的变化而起作用的。
之后我们会通过MDN的几种示例来一一验证。我们先看看它的通用语法。有不理解的不要紧,往下看就行。
call的语法
_function_.call(_thisArg_, _arg1_, _arg2_, ...)
function就是个方法,我们通过一个类型是function的对象调用call
thisArg代表this值,但是这个this值是在function运行时的this值。(反复读,还不理解就向下看,有例子阐述)非严格模式,null和undefined会被替换为全局对象。
arg1,arg2,...参数列表
其返回值来源于function最终的返回值,若没有则为undefined
call的描述(来源MDN)
call()
允许为不同的对象分配和调用属于一个对象的函数/方法。
call()
提供新的 this 值给当前调用的函数/方法。你可以使用 call
来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。
call的示例(干货来了)
以下示例很是经典,建议手敲,并在不理解的地方看一看其打印值。
先看代码,再看我的解释,将你的理解和我的理解对比一下,有问题我们评论区探讨或加下方微信
我们看看下面的代码,这一段代码的目的是给Food构造函数和Toy的属性值赋值,仅通过一个Project的父构造函数,就能将两个不同类型的子构造函数Food和Toy其相同属性赋值,大大减少了冗余代码
Food和Toy构造函数通过call继承了Project构造函数。大家回想下我最开始说的,call就是改变了其this指向。我们按照代码的执行顺序来看。
- 先是定义了Project、Food、Toy构造函数。
- 调用Food、Toy构造函数
- 重点: Product.call(this, name, price); 首先明确一点,这里这个this值为Food构造函数,没什么争议的。将其对应到语法中也就是thisArg就是Food构造函数,function就是Project构造函数,则Project的运行时的this值就为Food构造函数。
大家运行后可以看看几个构造函数中的this值是什么,调用call之前和之后的this值变化。
function Product(name, price) {
console.log('Project构造函数this:',this)
this.name = name;
this.price = price;
}
function Food(name, price) {
console.log('Food构造函数this:',this)
Product.call(this, name, price);
this.category = 'food';
}
function Toy(name, price) {
console.log('Toy构造函数this:',this)
Product.call(this, name, price);
this.category = 'toy';
}
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);
下面这段代码,定义了一个匿名函数,该匿名函数调用call,为其animal中的对象增加print方法,并调用。
分析了一个例子,这个就不用那么细了。我们直奔主题。
对比语法,匿名函数就是语法中的function,animals[i],就是该匿名函数中this的值,因此通过循环我们为animals的每个对象增加了print方法。
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
}
如果不通过greet.call调用,greet函数中的this指向的是greet函数本身,则this.animal则undefined
依旧是改变this指向。
function greet() {
var reply = [this.animal, '通常睡', this.sleepDuration].join(' ');
console.log(reply);
}
var obj = {
animal: '猫', sleepDuration: '12到16个小时'
};
greet.call(obj); //其greet函数中的this值为obj
非严格模式下,若不定义call函数中第一个参数thisArg值,则thisArg值为window(全局对象)
严格模式下,若不定义call函数中第一个参数thisArg值,则thisArg值为undefined
var sData = 'Wisen';
function display() {
console.log('sData value is %s ', this.sData);
}
display.call(); // sData value is Wisen
'use strict';
var sData = 'Wisen';
function display() {
console.log('this',this);
console.log('sData value is %s ', this.sData);
}
display.call();
// this undefined
// Cannot read the property of 'sData' of undefined
自己实现call方法
下面的代码,基本实现了call方法的作用,一些异常还没做。留给各位小伙伴了。
call的主要目的是将function中的this指向变为thisArg,因此我们只需要将调用call时的this赋给thisArg就好了。
代码分四步:
- 解析出参数列表
- 改变function的this指向为thisArg
- 释放额外赋予的对象属性
- 返回结果
Function.prototype.callFn = function(context) {
//thisArg若为undefined或null,将其设为window全局
if(context === undefined || context ===null){
context = window
}
//将参数从arguments取出
var args = []
for (let i=0;i<arguments.length;i++) {
if(i!== 0){
args.push(arguments[i])
}
}
//console.log('callFn_this:',this)//this为Project
//console.log('callFn_context:',context)//context为Food
//将context设置为对象,并将this给予context任意一个属性
context = new Object(context)
const key = 'key'
context[key] = this
//返回结果为thisArg(...args)
const result = context[key](...args)
delete context[key]
return result
}
测试代码:
不做解释了就
Function.prototype.callFn = function(context) {
//thisArg若为undefined或null,将其设为window全局
if(context === undefined || context ===null){
context = window
}
//将参数从arguments取出
var args = []
for (let i=0;i<arguments.length;i++) {
if(i!== 0){
args.push(arguments[i])
}
}
//console.log('callFn_this:',this)//this为Project
//console.log('callFn_context:',context)//context为Food
//将context设置为对象,并将this给予context任意一个属性
context = new Object(context)
const key = 'key'
context[key] = this
//返回结果为thisArg(...args)
const result = context[key](...args)
delete context[key]
return result
}
function Product(name, price) {
console.log('Product this:',this)
this.name = name;
this.price = price;
}
function Food(name, price) {
console.log('Food_this:',this)
let newFood = Product.callFn(this, name, price);
// let newFood = Product.apply(this, [name, price]);
// let newFood = Product.bind(this, [name, price])();
console.log(this === newFood)
this.category = 'food';
}
console.log(new Food('cheese', 5).name);