JS中call/apply、arguments、undefined/null方法详解


Posted in Javascript onFebruary 15, 2016

a.call和apply方法详解
--------------------------------------------------------------------------------

call方法:

语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明: call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:

语法:apply([thisObj[,argArray]])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

实例学习:

function add(a,b){ alert(a+b);}
function sub(a,b){ alert(a-b);}
add.call(sub,3,1);

打印结果为4。调用add函数,但是调用对象(上下文环境)不是add对象,而是sub函数对象。注意:js中的函数其实是对象,函数名是对 Function 对象的引用。

function Animal(){ 
this.name = "Animal"; 
this.showName = function(){ alert(this.name);} 
}
function Cat(){ this.name = "Cat"; } 
var animal = new Animal(); 
var cat = new Cat(); 
animal.showName.call(cat,",");//输出结果为"Cat"
animal.showName.apply(cat,[]);//输出结果为"Cat"

call 的意思是把 animal 的方法放到cat上执行,上下文环境为cat,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,而cat的this.name是Cat。所以this.name 应该是 Cat

实现继承

function Animal(name){ 
this.name = name; 
this.showName = function(){ alert(this.name);} 
} 
function Cat(name){ Animal.call(this, name); } 
var cat = new Cat("Black Cat"); 
cat.showName();

Animal.call(this) 的意思就是调用Animal方法,但是使用 this对象代替Animal对象,上下文环境变成了this。new Cat("Black Cat")中使用Animal.call给当前的上下文环境设置了属性name和方法showName。

拓展:多重继承

function Class10(){
this.showSub = function(a,b){ alert(a-b); }
}
function Class11(){
this.showAdd = function(a,b){ alert(a+b); }
}
function Class2(){
Class10.call(this);
Class11.call(this);
}

备注:js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法。说了call ,当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组或arguments。

b.arguments使用

--------------------------------------------------------------------------------

什么是arguments

arguments 是是JavaScript里的一个内置对象,它很古怪,也经常被人所忽视,但实际上是很重要的。所有主要的js函数库都利用了arguments对象。所以agruments对象对于javascript程序员来说是必需熟悉的。

所有的函数都有属于自己的一个arguments对象,它包括了函所要调用的参数。他不是一个数组,如果用typeof arguments,返回的是'object'。虽然我们可以用调用数据的方法来调用arguments。比如length,还有index方法。但是数 组的push和pop对象是不适用的。

使用arguments创建一个灵活的函数

看起来貌似argument对象使用起来十分有限,但是实际上它是一个非常有用的对象。你可以通过使用argument对象让函数能够调用数量不定 的参数。在Dean Edwards的base2库里有个格式化的函数,展示了这个灵活性。

function format(string) {
var args = arguments;
var pattern = new RegExp('%([1-' + arguments.length + '])', 'g');
return String(string).replace(pattern, function(match, index,position,all) { 
console.log(match + '&' + index + '&' + position + '&' + all);
return args[index]; 
}); 
};

掉用format('And the %1 want to know whose %2 you %3', 'papers', 'shirt', 'wear');结果为"And the papers want to know whose shirt you wear";控制台打印为

%1&1&8&And the %1 want to know whose %2 you %3

%2&2&30&And the %1 want to know whose %2 you %3

%3&3&37&And the %1 want to know whose %2 you %3

把arguments对象转换成一个真正的数组

虽然arguments对象不是一个真正的javascript数组,但是我们还是可以轻易的把它转换成标准的数据 ,然后进行数组操作。

var args = Array.prototype.slice.call(arguments);

那么现在这个变量args就含有一个含有函数所有参数的标准javascript数组对象。

拓展:使用上一节的format函数,通过预置的arguments对象创建函数

function makeFunc() { 
var args = Array.prototype.slice.call(arguments); 
var func = args.shift(); 
return function() { 
return func.apply(null, args.concat(Array.prototype.slice.call(arguments))); 
}; 
}

该方法会将第一个参数取出来,然后返回一个curry化函数,该curry化函数的参数(第二个arguments)将和makeFunc的从第二个参数开始的参数组合成新数组。并返回makeFunc第一个参数的apply调用

执行

var majorTom = makeFunc(format, "This is Major Tom to ground control. I'm %1.");
majorTom("stepping through the door");

结果为:"This is Major Tom to ground control. I'm stepping through the door."

控制台打印:%1&1&41&This is Major Tom to ground control. I'm %1.

[function.]arguments.callee

说明:arguments.callee方法返回的是正在执行的函数本身。

callee 属性是 arguments 对象的一个成员,它表示对函数对象本身的引用,这有利于匿名函数的递归或者保证函数的封装性,例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性,这个属性有时候用于验证还是比较好的。arguments.length是实参长度,arguments.callee.length是形参(定义时规定的需要的参数)长度,由此可以判断调用时形参长度是否和实参长度一致。

//用于验证参数
function calleeLengthDemo(arg1, arg2) {
if (arguments.length==arguments.callee.length) {
window.alert("验证形参和实参长度正确!");
return;
} else {
alert("实参长度:" +arguments.length);
alert("形参长度: " +arguments.callee.length);
}
}
//递归计算
var sum = function(n){
if (n <= 0) return 1;
else return n +arguments.callee(n - 1)
}
//比较一般的递归函数:
var sum = function(n){
if (1==n) return 1;
else return n + sum (n-1);
}

调用时:alert(sum(100));其中函数内部包含了对sum自身的引用,函数名仅仅是一个变量名,在函数内部调用sum即相当于调用一个全局变量,不能很好的体现出是调用自身,这时使用callee会是一个比较好的方法。

拓展 functionName.caller

说明: 返回是谁调用了functionName 函数。functionName 对象是所执行函数的名称。对于函数来说,caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的,那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性,那么结果和 functionName.toString 一样,也就是说,显示的是函数的反编译文本。 下面的例子说明了 caller 属性的用法:

// caller demo {
function callerDemo() {
if (callerDemo.caller) {
var a= callerDemo.caller.toString();
alert(a);
} else {
alert("this is a top function");
}
}
function handleCaller() {
callerDemo();
}
handleCaller();

执行结果:

JS中call/apply、arguments、undefined/null方法详解

c.undefined和null

--------------------------------------------------------------------------------

大多数计算机语言,有且仅有一个表示"无"的值,比如,C语言的NULL,Java语言的null,Python语言的none,Ruby语言的nil。有点奇怪的是,JavaScript语言居然有两个表示"无"的值:undefined和null。这是为什么?

相似性

在JavaScript中,将一个变量赋值为undefined或null,老实说,几乎没区别。

代码如下:

var a = undefined;
var a = null;

上面代码中,a变量分别被赋值为undefined和null,这两种写法几乎等价。

undefined和null在if语句中,都会被自动转为false,相等运算符甚至直接报告两者相等。

if (!undefined) 
console.log('undefined is false');
// undefined is false
if (!null) 
console.log('null is false');
// null is false
undefined == null
// true

上面代码说明,两者的行为是何等相似!但是我们去查看undefined和null的各自的类型却发现类型是不同的。js基础类型中没有null类型

typeof null;//"object"
typeof undefined;//"undefined"

既然undefined和null的含义与用法都差不多,为什么要同时设置两个这样的值,这不是无端增加JavaScript的复杂度,令初学者困扰吗?Google公司开发的JavaScript语言的替代品Dart语言,就明确规定只有null,没有undefined!

历史原因

原来,这与JavaScript的历史有关。1995年JavaScript诞生时,最初像Java一样,只设置了null作为表示"无"的值。

根据C语言的传统,null被设计成可以自动转为0。

Number(null) // 0
5 + null // 5

但是,JavaScript的设计者Brendan Eich,觉得这样做还不够,有两个原因。

首先,null像在Java里一样,被当成一个对象。

typeof null // "object"

但是,JavaScript的数据类型分成原始类型(primitive)和合成类型(complex)两大类,Brendan Eich觉得表示"无"的值最好不是对象。

其次,JavaScript的最初版本没有包括错误处理机制,发生数据类型不匹配时,往往是自动转换类型或者默默地失败。Brendan Eich觉得,如果null自动转为0,很不容易发现错误。因此,Brendan Eich又设计了一个undefined。

最初设计

JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

Number(undefined) // NaN
5 + undefined // NaN

目前的用法

但是,上面这样的区分,在实践中很快就被证明不可行。目前,null和undefined基本是同义的,只有一些细微的差别。

null表示"没有对象",即该处不应该有值。典型用法是:

(1) 作为函数的参数,表示该函数的参数不是对象。

(2) 作为对象原型链的终点。

Object.getPrototypeOf(Object.prototype) // null

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:

(1)变量被声明了,但没有赋值时,就等于undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。

(3)对象没有赋值的属性,该属性的值为undefined。

(4)函数没有返回值时,默认返回undefined。

var i;
i // undefined
function f(x){console.log(x)}
f() // undefined
var o = new Object();
o.p // undefined
var x = f();
x // undefined

以上所述是小编给大家介绍的JS中call/apply、arguments、undefined/null方法详解,希望对大家有所帮助。

Javascript 相关文章推荐
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
js制作支付倒计时页面
Oct 21 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 #Javascript
仅30行代码实现Javascript中的MVC
Feb 15 #Javascript
理解javascript中的with关键字
Feb 15 #Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 #Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 #Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 #Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 #Javascript
You might like
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
基于jQuery的星级评分插件
2011/08/12 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
Vuex 入门教程
2018/01/10 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
python字符串string的内置方法实例详解
2018/05/14 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
基于python实现名片管理系统
2018/11/30 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
详解KMP算法以及python如何实现
2020/09/18 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
个人安全承诺书
2014/05/22 职场文书
大学生自荐材料范文
2014/12/30 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
争先创优个人总结
2015/03/04 职场文书
村主任当选感言
2015/08/01 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技