摘要:除语法不同外,两者的区别在于解析器读取的顺序。解析器会事先读取函数声明,即使你把函数声明放在代码的末端也没关系。修改对象将可能导致命名参数失去意义。其实除允许匿名函数递归调用自身外,并没有什么太大用处。
javaScript因为其语法松散,导致函数(尤其是this)看似简单,其实里面花头很多。本篇介绍一下JavaScript函数及其调用方法。
• 函数声明和函数表达式
• arguments
• this
• this补充说明
函数声明和函数表达式
JavaScript里对象字面量产生的对象将被连接到Object.prototype,函数对象将被连接到Function.prototype(但该对象本身也连接到Object.prototype)。先看一下函数声明和函数表达式(分匿名和命名):
function count(a,b){ return a*b; } //函数声明 var d1 = function(n) { return n*2; }; //匿名函数表达式 var d2 = function double(n) { return n*2; }; //命名函数表达式 console.log(count(3,4)); //12 console.log(d1(3)); //6 console.log(d2(3)); //6 console.log(double(3)); //error,double未定义
上面代码可以看出函数声明和函数表达式在后续的调用中,效果是没有差别的。除语法不同外,两者的区别在于JS解析器读取的顺序。
解析器会事先读取函数声明,即使你把函数声明放在代码的末端也没关系。而对于函数表达式,同其它基本类型的变量一样,只有在执行到该行语句时才解析。因此用函数表达式时,必须确保它在调用语句之前,否则会报错。
再看匿名和命名函数表达式的区别。上例中命名函数表达式将函数绑定到变量d2上,而非变量double上,因此double(3);会出现未定义error。
那命名函数表达式有什么用呢?比如上面的变量double有什么用呢?函数名double可用于在函数内部做递归,但可惜仍旧没必要,因为变量d2同样也可以在函数内部递归。因此命名函数表达式真正的作用在于调试,JavaScript环境提供对Error对象的栈追踪功能,可以用double进行栈追踪。
但命名函数表达式仍旧有很多问题,类似with一样。因此通常推荐用匿名函数表达式,不推荐用命名函数表达式:
var d1 = function(n) { return n*2; }; //Yes,推荐 var d2 = function double(n) { return n*2; }; //No,不推荐
arguments
每个函数都接受2个附加参数:this和arguments。先看arguments。JS的函数参数其实就是个类似数组的arguments对象,是对形参的一个映射,但是值是通过索引来获取的。因此JS的函数天然支持可变参数。
arguments对象看似像数组,但请不要使用arguments.shift()等方法来修改arguments。修改arguments对象将可能导致命名参数失去意义。
例如person(name, age),参数name是arguments[0]的别名,age是arguments[1]的别名,如果用shift移除arguments后,name仍旧是arguments[0]的别名,age仍旧是arguments[1]的别名,函数开始失控。
因此,如果你无论如何要修改arguments,需要先将arguments对象转化为真正的数组:
var args = [].slice.call(arguments);
之后对args对象进行shift()等操作。这也常见于获取可变参数值,同样需要上述那样将arguments对象转化为真正的数组。
另外每个arguments对象都有两个额外的属性:arguments.callee和arguments.caller。前者指向使用该arguments对象被调用的函数。后者指向调用该arguments对象的函数。
其实arguments.callee除允许匿名函数递归调用自身外,并没有什么太大用处。但可惜用函数名也能实现递归,所以它真没什么用处:
//用arguments.callee来递归 var factorial = (function(n) { return (n <= 1) ? 1 : (n * arguments.callee(n - 1)); //递归 });
//但也可以直接用函数名来递归
function factorial(n) {
return (n <= 1) ? 1 : (n * factorial(n - 1));
}
用arguments.caller可以跟踪栈信息,但它不可靠,如果某函数在栈中出现了不止一次,很容易陷入死循环,大多数环境已经移除了此特性。
JS严格模式下禁止使用arguments.callee和arguments.caller,因此这两个属性就不多废话了。
this
arguments介绍完后,再来看看this。在JS中this取决于调用的方式,不同的函数调用方式,this绑定的对象也不同。有4种调用方式:
• 方法调用
• 函数调用
• 构造器调用
• apply / call / bind调用
方法调用:当函数作为对象方法时,函数里的this被绑定到该var myNum = {
value: 0, increment: function(inc) { //函数作为对象方法 this.value += inc; }
};
myNum.increment(2);
console.log(myNum.value); //2,this被绑定到myNum用:函数非对象方法时,this被绑定到全局对象window。这其实是语言设计上的一个错误(或曰特性),导致this不能调用内部函数。要调用内部函数,可以将that = this保存起来。
function double(n){ return n*2; } //普通函数,this绑定到全局对象window
//错误的例子
myNum.count = function() {
var helper = function() { this.value = double(this.value); }; helper();
}
myNum.count();
console.log(myNum.value); //value不变
//正确的例子:
myNum.count = function() {
var that = this; var helper = function() { that.value = double(that.value); //现在参数是myNum.value }; helper();
}
myNum.count();
console.log(myNum.value); //4
错误的例子中,期望this绑定的是对象myNum,但由于double是普通函数,因此this绑定的是window,而window显然没有value。即helper里this是window,因此double(this.value);不会被执行。最终myNum的value值并没有变。
正确的例子在对象myNum方法里,this绑定的是myNum对象,因此先用that将this保存起来。然后在内部传递的都是that,回避了helper函数内this发生改变的问题。这里写代码片
构造函数调用:用new调用构造函数,会先创建一个连接到构造函数的prototype的新对象,再将this会绑定到该新对象
var Name = function(n) { this.name = n; } Name.prototype.getName = function() { return this.name; } var myName = new Name("Jack"); //this绑定到myName对象 console.log(myName.getName()); //Jack apply / call / bind调用:允许我们自己绑定想要的this var friend = { name: "Betty" }; console.log(Name.prototype.getName.apply(friend)); //Betty console.log(Name.prototype.getName.call(friend)); //Betty console.log(Name.prototype.getName.bind(friend)()); //Betty
this补充说明
这一节并无任何新的内容,只不过对this进一步补充说明一下。我们知道对象都有prototype俗称原型对象。那prototype里的this绑定谁呢?其实原则没有变,从上面构造函数调用的例子就能看出this仍旧是绑定调用的对象。
为了更清晰一点,将上面构造函数调用的例子稍微改一下:
var Name = function() {}; Name.prototype = { name: "(not set)", setName: function(n) { this.name = n; } } var myName = new Name(); console.log(myName.name); //(not set) console.log(myName.hasOwnProperty("name")); //false console.log(myName.hasOwnProperty("setName")); //false myName.setName("Jack"); console.log(myName.name); //Jack console.log(myName.hasOwnProperty("name")); //true console.log(myName.hasOwnProperty("setName")); //false
先看第一段结果代码,Name本身没有任何属性,name和setName是在它的原型prototype中定义的。因此用hasOwnProperty来检查全是false。这与我们的预想完全一致,没什么可奇怪的。
再看第二段结果代码,由于执行了myName.setName("Jack");。原型prototype中的this不是绑定原型对象,而是绑定调用的对象。即setName中的this绑定的是对象myName,会给对象增加一个name属性。所以hasOwnProperty("name")会为true。
self补充说明
这个非常简单。我们知道,打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一个window对象,也是js运行所依附的全局环境对象和全局作用域对象。self 指窗口本身,它返回的对象跟window对象是一模一样的。也正因为如此,window对象的常用方法和函数都可以用self代替window。举个例子,常见的写法如“self.close();”,把它放在标记中:“关闭窗口”,单击“关闭窗口”链接,当前页面关闭。
明白这些原理后,再回过头看看以前不明白的代码里this,that,self等就轻松多了。
更多资源上:去转盘;或者加我的QQ群参与js,css的讨论学习(QQ群:512245829)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/80158.html
在上一篇文章(《javascript高级程序设计》笔记:Function类型)中稍微提及了一下函数对象的属性—this,在这篇文章中有深入的说明: 函数的三种简单调用模式 1 函数模式 定义的函数,如果单独调用,不将其与任何对象关联,那么就是函数调用模式 function fn(num1, num2) { console.log(this); } // 直接在全局调用 fn();// w...
摘要:目录函数的声明函数的属性和方法函数的作用域闭包知识点小结关于函数,可以从以下个方面去理解首先,数据类型上看函数在中是一种数据类型,是对象的一种其次,从功能上看函数本质上是一段反复调用的代码块最后,从地位上看函数在中和其他基本数据类型一样,可 目录 1.函数的声明 2.函数的属性和方法 3.函数的作用域 4.闭包知识点 5.小结 关于函数,可以从以下3个方面去理解:首先,数据类型上看:...
摘要:基本操作理解写在前面在面向对象的语言中,关键字的含义是明确且具体的,即指代当前对象。一般在编译期确定下来,或称为编译期绑定。全局范围内当在全部范围内使用,它将会指向全局对象。输出浏览器中运行的脚本,这个全局对象是。 js基本操作-this理解 写在前面 在面向对象的语言中,this关键字的含义是明确且具体的,即指代当前对象。一般在编译期确定下来,或称为编译期绑定。而在 JavaScr...
摘要:理解文章中已经比较全面的分析了在中的指向问题,用一句话来总结就是的指向一定是在执行时决定的,指向被调用函数的对象。与和直接执行原函数不同的是,返回的是一个新函数。这个新函数包裹了原函数,并且绑定了的指向为传入的。 理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,...
摘要:延长作用域链下面两种语句可以在作用域链的前端临时增加一个变量对象以延长作用域链, 问题 今天看笔记发现自己之前记了一个关于同名标识符优先级的内容,具体是下面这样的: 形参优先级高于当前函数名,低于内部函数名 形参优先级高于arguments 形参优先级高于只声明却未赋值的局部变量,但是低于声明且赋值的局部变量 函数和变量都会声明提升,函数名和变量名同名时,函数名的优先级要高。执行代...
阅读 3280·2023-04-26 02:09
阅读 2574·2021-11-24 09:39
阅读 3268·2021-11-16 11:52
阅读 3614·2021-10-26 09:50
阅读 2771·2021-10-08 10:05
阅读 2456·2021-09-22 15:25
阅读 3299·2019-08-30 13:14
阅读 908·2019-08-29 17:06