Why invoke apply instead of calling function directly?
时间:2022-03-12 23:15
I think the explanation from the describes it well:
You can assign a different this object when calling an existing function. this refers to the current object, the calling object. With apply, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.
apply is very similar to call, except for the type of arguments it supports. You can use an arguments array instead of a named set of parameters. With apply, you can use an array literal, for example, fun.apply(this, [name, value]), or an Array object, for example, fun.apply(this, new Array(name, value)).
As for the parameters:
thisArg Determines the value of this inside fun. If thisArg is null or undefined, this will be the global object. Otherwise, this will be equal to Object(thisArg) (which is thisArg if thisArg is already an object, or a String, Boolean, or Number if thisArg is a primitive value of the corresponding type). Therefore, it is always true that typeof this == "object" when the function executes.
argsArray An argument array for the object, specifying the arguments with which fun should be called, or null or undefined if no arguments should be provided to the function.
The docs give a good example of a use case for apply. In the example below, apply is used to chain a constructor:
function product(name, value) { this.name = name; if (value >= 1000) this.value = 999; else this.value = value; } function prod_dept(name, value, dept) { this.dept = dept; product.apply(this, arguments); } prod_dept.prototype = new product(); // since 5 is less than 1000 value is set var cheese = new prod_dept("feta", 5, "food"); // since 5000 is above 1000, value will be 999 var car = new prod_dept("honda", 5000, "auto");
Notice that in the prod_dept constructor, the this supplied refers to the prod_dept object, and arguments is an array of arguments passed to the product constructor.
现象
经常在网上或者阅读源码时看到下面的代码:
Array.prototype.slice.call(arr, 3);
而不是
arr.slice(3);
原因
这是为什么呢, 毕竟下面这种方法更短, 代码看起来也更清晰.
因为使用prototype.fn.call
这种方式可以更好的复用代码, 下面这个例子:
var divs = document.getElementsByTagName(‘div‘);
var first_three_div = divs.slice(3) // TypeError: divs.slice is not a function
var first_three_div = Array.prototype.slice.call(divs, 3); // ok
这里 divs
是一个 HTMLCollection
对象, 但不是一个 Array
对象, 因此直接调用 slice
会出现错误, 而使用 Array.prototype.slice.call
我们可以复用 Array
的方法实现 HTMLCollection
对象的 slice
方法. 这是因为我们使用 call
调用原型方法, 使 this
指针指向 HTMLCollection
对象, 而且这个对象正好拥有 length
属性和通过数字下标获取元素的方法, 因此 slice
能够返回正确的结果.
总结
通过原型方法调用可以复用其他类型的方法, 比如非 Array
类型可以使用 slice
方法获得 slice
的功能.
参考
相关推荐
- Android系统编程入门系列之界面Activity交互响应
- 新型横向移动工具原理分析、代码分析、优缺点以及检测方案
- uni-app滚动视图容器(scroll-view)之监听上拉事件
- uniapp h5,app两端复制文本
- Android系统编程入门系列之界面Activity响应丝滑的传统动画
- 【Azure 应用服务】App Service 配置 Application Settings 访问Storage Account得到 could not be resolved: '*.file.core.windows.net'的报错。没有解析成对应中国区 Storage Account地址 *.file.core.chinacloudapi.cn
- 诺基亚短信生成!太好玩了
- iOS 跳转App Store进行评分
- 开发一个即时通讯App
- 关闭苹果IOS app自动更新
电脑软件
本类排行
- 1关闭苹果IOS app自动更新
- 2iOS 跳转App Store进行评分
- 3诺基亚短信生成!太好玩了
- 4Android系统编程入门系列之界面Activity响应丝滑的传统动画
- 5uniapp h5,app两端复制文本
- 6uni-app滚动视图容器(scroll-view)之监听上拉事件
- 7新型横向移动工具原理分析、代码分析、优缺点以及检测方案
- 8Android系统编程入门系列之界面Activity交互响应
- 9开发一个即时通讯App
- 10【Azure 应用服务】App Service 配置 Application Settings 访问Storage Account得到 could not be resolved: '*.file.core.windows.net'的报错。没有解析成对应中国区 Storage Account地址 *.file.core.chinacloudapi.cn