函数
函数是JavaScript中特殊的对象,对函数执行typeof运算会返回字符串"function",因为函数也是对象,他们可以拥有属性和方法。
静态方法
函数在JS中定义了类的名字,任何添加到函数的属性都是类字段和类方法(类比Java中类的static variable 和 static method),下面代码起到Java里面static method的效果:
var foo = function(){}; foo.printLog = function(){ if (arguments.length != 0) { console.log(Array.prototype.join.call(arguments, " - ")); } }; foo.printLog("Test", "Static Method");
构造函数
如果函数或者方法的调用之前加上new关键字,他就构成了构造函数的调用.,
构造函数的调用和普通函数,方法的调用在实参处理,调用上下文和返回值方面有不同
(1).实参处理不同
凡是没有形参的构造函数调用都可以省略圆括号
(2)调用上下文的不同
调用构造函数创建一个新的空对象,这个对象继承自构造函数的prototype(原型).构造函数试图初始化这个新对象,并把这个新对象当做构造函数的调用上下文,所以在构造函数中this关键字可以用来引用这个新对象,也就能够在构造函数中初始化这个新对象.
注意: 尽管构造函数看起来像一个方法调用,它依然会使用这个新对象作为调用上下文。也就是说,在表达式new o.m() 中,调用上下文并不是o.
例子1-2:
function A() { this.a = 123; this.init(); } A.prototype = { get: function(){console.log('The value of A is ' + this.a);}, init: function(){ console.log('do init here'); this.a=567; } } var obj = new A; obj.get();
(3)返回值不同
构造函数通常不使用return关键字调用完毕之后会返回一个对象(就是新创建的这个对象)
this关键字
this是一个关键字,不是变量也不是属性.
this关键字没有作用域的限制,他只有下面几种情况
(1)一个函数被当做方法调用,则函数中的this指向的是调用它的对象
(2)一个函数被当做函数调用,则函数中的this指向的全局对象(非严格模式)或者是undefined(严格模式下)
(3)函数被当做构造函数调用,this就指向构造函数创建的新对象
例子:
var a = {name:'frank',age:30};//创建一个新对象 function A() { console.log(this); } A.call(a); //对象a的方法调用:this代表对象a,因为通过call的调用上下文是a A();//全局函数调用:this代表全局变量window new A();//构造函数调用: this代表新创建的对象A {}
函数原型,每一个函数都包含一个prototype属性,而且这个prototype包含唯一一个属性constructor指向构造函数对象,当将函数用做构造函数的时候,新创建的对象会从原型对象上继承属性,按照惯例,构造函数首字母要大写:
function Foo(){};//Constructor Foo.prototype = { constructor:Foo;//因为重写了prototype,需要显示的将constructor定义在此 userName:"Frank"}; var fooInstance = new Foo(); console.log(fooInstance.userName);//As an instance of Foo, it inherited all attributes from Foo's prototype console.log(Foo.userName);// 函数对象Foo并没有userName属性,所以是undefined,但是Foo的原型对象有,并且被fooIntance继承 console.log(fooInstance.constructor === Foo);
注意:每个函数自身就是个对象,所以可以被赋值和像参数一样传递,但同时,它也可以被用作构造函数,用来创建其他对象。
构造函数的prototype是被所有实例共享的,例如:
<script type="text/javascript"> function Person(){}; Person.prototype = { constructor : Person, name : "Frank", friends : ["Coco","Nancy"], sayName: function(){ alert(this.name);} }; var p1 = new Person(); var p2 = new Person(); p1.friends.push("Van"); console.log(p1.friends); console.log(p2.friends); p1.sayName(); </script>
因为p1和p2共享prototype对象,所以p1的friends改变会影响到p2,这显然不是我们想要的,我们希望每个Person实例有自己单独的属性,但同时,我们又希望对一些公共方法可以共享,以节省内存。
构造方法和原型组合模式
构造方法用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,同时又共享着对方法的引用,最大限度地节省了内存。有点类似于继承,但区别是prototype是单例的。
修改后的写法:
<script type="text/javascript"> function Person(name, friends){ this.name = name; this.friends = friends; }; Person.prototype = { constructor : Person, sayName: function(){ console.log(this.name);} }; var p1 = new Person("Frank",["coco","nancy"]); var p2 = new Person("Daniel",["coco","nancy"]); p1.friends.push("Van"); console.log(p1.friends); console.log(p2.friends); p1.sayName(); p2.sayName(); </script>
函数直接量(function literal),匿名函数 (anonymous function)
作为命名空间的函数
在函数中声明的变量在整个函数体内都是可见的,在函数的外部是不可见的(局部变量)。不在任何函数中声明的变量是全局变量,在整个JavaScript程序中都可见。
一种惯用法是用自调用匿名函数(self-invoking anonymous function) 来实现这个命名空间技术,其写法如下
(function(){
//模块代码
})();
因为默认情况下,JS是运行在全局的namespace下,而对全局变量的暴露是非常危险的,因为任何无意的修改和覆盖都会来带意想不到的错误。因此在JS开发中,尽量不要定义全局变量。在JS框架开发中此条法则体现的尤为明显,因为假如框架暴露过多的全局变量,一旦被用户修改,就可能导致框架不可用。
所以在JQuery中,整个框架通过 window.jQuery = window.$ = jQuery; 只向外部暴露了2个全局变量,即著名的$和JQuery
详细请见jQuery源码分析: http://nuysoft.iteye.com/blog/1177451
对象
JavaScript 中,除了数字、true、false、null和undefined之外,其他值都是对象,每个对象拥有三个相关的对象属性(object attribute)
- 对象的原型(prototype)指向另一个对象,本对象的属性继承自它的原型对象。对象继承是通过原型链实现的
- 对象的类(class)是一个标识对象类型的字符串
- 对象的扩展标记(extensible flag)指明了是否可以向该对象添加新属性
对象继承
var o = {};// o 从 Object.prototype 继承对象属性 o.x =1; // 定义新属性x var p = inherit(o);//p继承o和Object.prototype p.y = 2; var q = inherit(p);//q继承p、o和Object.prototype q.z =3 ; console.log(q.x + q.y); console.log(q.toString() + q.a);//toString继承自Object.prototype, q.a is undefined function inherit(parent){ f = function (){};//定义一个空构造函数 f.prototype = parent; //将其原型属性设置为p return new f();//使用f()创建p的继承对象 };
上面代码对象在内存中的示意图:
对象工厂
工厂方法这个设计模式在JS中也是经常用到,下面以jQuery源码为例,看一下对象工厂的运用。
<script language="javascript"> console.log("Start"); (function(window){//自调用函数 var //定义本地变量 core_version = "1.0.0", jQuery = function(){//这是一个工厂方法,专门用来产生jQuery对象 return new jQuery.fn.init();//下面的prototype赋值使得init函数和jQuery函数据有相同的prototype,即jQuery对象 }; jQuery.fn = jQuery.prototype = { jquery: core_version, constructor: jQuery, init: function(){ return this; }, debug: function(){console.log("debugging")} }; // Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn; window.jQuery = window.$ = jQuery;//将本地变量jQuery设置为全局变量 }(window));//传入全局变量window $().debug();//$()将返回一个通过工厂方法产生的对象。 console.log("Current version is "+$().jquery); </script>