JavaScript高级编程之对象扩展与继承.doc

第1节 JavaScript this关键字精解1 JavaScript call()函数：call()方法/apply()的意义在于扩充函数的作用域！JavaScript func.call()定义： 若IsCallable(func)为false，则抛出TypeError异常。 将argList置空。 若方法调用不止一个参数，则按从左向右的顺序将参数添加到argList中。 返回func中的方法调用结果，提供thisArg作为this的值，并将argList作为参数列表。1 Make an argument list (argList) out of parameters 1 through the end2 The first parameter is thisValue3 Invoke the function with this set to thisValue and the argList as its argument list例子：function hello(thing) console.log(this + says hello + thing); hello.call(Yehuda, world) /= Yehuda says hello world以上调用简化：function hello(thing) console.log(Hello + thing); / this:hello(world) / desugars to:hello.call(window, world);4 但ECMAScript5规范对此作了进一步限定，只在严格模式下才会将thisValue绑定到window，而一般情况下，绑定到undefined。原文：a function invocation like fn(.args) is the same as fn.call(window ES5-strict: undefined, .args)./ this:hello(world) / desugars to:hello.call(undefined, world);5 内联函数（inline function）：(function() )() is the same as(function() ).call(window ES5-strict: undefined)2 成员函数2.1 内置成员函数var person = name: Brendan Eich, hello: function(thing) console.log(this + says hello + thing); / this:person.hello(world) / desugars to this:person.hello.call(person, world);2.2 外成员函数function hello(thing) console.log(this + says hello + thing); person = name: Brendan Eich person.hello = hello; person.hello(world) / still desugars to person.hello.call(person, world) hello(world) / object DOMWindowworld3 使用Ftotype绑定将this绑定到指定对象的方法：var person = name: Brendan Eich, hello: function(thing) console.log( + says hello + thing); var boundHello = function(thing) return person.hello.call(person, thing); boundHello(world);上述方法一般化：var bind = function(func, thisValue) return function() return func.apply(thisValue, arguments); var boundHello = bind(person.hello, person);boundHello(world) / Brendan Eich says hello worldECMAScript提供了bind()方法实现上述功能。var boundHello = person.hello.bind(person);boundHello(world) / Brendan Eich says hello world常用于原生函数作为被调函数：var person = name: Alex Russell, hello: function() console.log( + says hello world); $(#some-div).click(person.hello.bind(person); / when the div is clicked, Alex Russell says hello world is printed第2节 分类讲解JavaScript this1 作为对象方法调用在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象。 var point = x : 0, y : 0, moveTo : function(x, y) this.x = this.x + x; this.y = this.y + y; ; point.moveTo(1, 1)/this 绑定到当前对象，即 point 对象2 作为函数调用函数也可以直接被调用，此时 this 绑定到全局对象。在浏览器中，window 就是该全局对象。比如下面的例子：函数被调用时，this 被绑定到全局对象，接下来执行赋值语句，相当于隐式的声明了一个全局变量，这显然不是调用者希望的。代码1：function makeNoSense(x) this.x = x; makeNoSense(5); x;/ x 已经成为一个值为 5 的全局变量代码2：var point = x : 0, y : 0, moveTo : function(x, y) / 内部函数 var moveX = function(x) this.x = x;/this 绑定到了哪里？ ; / 内部函数 var moveY = function(y) this.y = y;/this 绑定到了哪里？ ; moveX(x); moveY(y); ; point.moveTo(1, 1); point.x; /=0 point.y; /=0 x; /=1 y; /=1代码3：var point = x : 0, y : 0, moveTo : function(x, y) var that = this; / 内部函数 var moveX = function(x) that.x = x; ; / 内部函数 var moveY = function(y) that.y = y; moveX(x); moveY(y); ; point.moveTo(1, 1); point.x; /=1 point.y; /=13 作为构造函数调用JavaScript 支持面向对象式编程，与主流的面向对象式编程语言不同，JavaScript 并没有类（class）的概念，而是使用基于原型（prototype）的继承方式。相应的，JavaScript 中的构造函数也很特殊，如果不使用 new 调用，则和普通函数一样。作为又一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。如果调用正确，this 绑定到新创建的对象上。代码：function Point(x, y) this.x = x; this.y = y; 4 使用 apply 或 call 调用让我们再一次重申，在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。很多 JavaScript 中的技巧以及类库都用到了该方法。让我们看一个具体的例子：function Point(x, y) this.x = x; this.y = y; this.moveTo = function(x, y) this.x = x; this.y = y; var p1 = new Point(0, 0); var p2 = x: 0, y: 0; p1.moveTo(1, 1); / 将moveTo()方法应用到对象p2上，并将对象上下文（context）切换为p2/ 也可以使用call()，和apply()类似，但参数为多个独立传入/ p1.moveTo.call(p2, 10, 10); p1.moveTo.apply(p2, 10, 10);5 JavaScript函数执行首先，创建ExecutionContext对象，作为函数执行的上下文。创建上下文时，创建arguments变量，包含函数调用的实参值。其次，创建作用域链。首先，创建初始化函数的形参表，即为arguments变量中对应的值，若没有初始化，则为undefined。其次，若函数包含内部函数，则初始化对应的值；若没有内部函数，则初始化局部变量为undefined（具体在ExecutionContext创建成功后，函数开始运行时，才会实际赋值）。最后，为this变量赋值（见以上几种类型）。至此函数的执行环境（ExecutionContext）创建成功，函数开始逐行执行，所需变量均从之前构建好的执行环境（ExecutionContext）中读取。6 Function.bind有了前面对于函数执行环境的描述，我们来看看 this 在 JavaScript 中经常被误用的一种情况：回调函数。JavaScript 支持函数式编程，函数属于一级对象，可以作为参数被传递。请看下面的例子 myObject.handler 作为回调函数，会在 onclick 事件被触发时调用，但此时，该函数已经在另外一个执行环境（ExecutionContext）中执行了，this 自然也不会绑定到 myObject 对象上。代码：button.onclick = myObject.handler;/ this绑定到button，而非myObject可以使用bind方法实现函数到对象的绑定：代码：var bind = function(func, thisValue) return function() return func.apply(thisValue, arguments); var boundHello = bind(person.hello, person);boundHello(world) / Brendan Eich says hello worldECMAScript提供了bind()方法实现上述功能。7 eval()方法JavaScript 中的 eval 方法可以将字符串转换为 JavaScript 代码，使用 eval 方法时，this 指向哪里呢？答案很简单，看谁在调用 eval 方法，调用者的执行环境（ExecutionContext）中的 this 就被 eval 方法继承下来了。第3节 Object.create()一、create()1 语法Object.create(proto , propertiesObject )2 参数proto: 一个对象,作为新创建对象的原型.propertiesObject:一个对象值,可以包含若干个属性,属性名为新建对象的属性名,属性值为那个属性的属性描述符对象.3 描述如果proto参数的值不是null或者对象值,则会TypeError异常.4 应用4.1 创建一个原型为null的空对象var o;/ 创建一个原型为null的空对象o = Object.create(null);4.2 字面量创建对象与create()/ （1）创建不带属性的对象o = ;/ 以字面量方式创建的空对象就相当于:o = Object.create(Ototype);4.3 创建带有属性的对象o = Object.create(Ototype, / foo会成为所创建对象的数据属性 foo: writable:true, configurable:true, value: hello , / bar会成为所创建对象的访问器属性 bar: configurable: false, get: function() return 10 , set: function(value) console.log(Setting o.bar to, value) )4.4 用函数创建对象function Constructor()o = new Constructor();/ 上面的一句就相当于:/ 当然,如果在Constructor函数中有一些初始化代码,Object.create不能执行那些代码o = Object.create(Ctotype);4.5 创建一个以另一个空对象为原型,且拥有一个属性p的对象/ 创建一个以另一个空对象为原型,且拥有一个属性p的对象o = Object.create(, p: value: 42 )/ 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:o.p = 24o.p/42o.q = 12for (var prop in o) console.log(prop)/qdelete o.p/false4.6 创建一个可写的,可枚举的,可配置的属性p/创建一个可写的,可枚举的,可配置的属性po2 = Object.create(, p: value: 42, writable: true, enumerable: true, configurable: true );5 create实现单继承/Shape - 父类function Shape() this.x = 0; this.y = 0;/ 定义父类的方法该方法属于所有对象Stotype.move = function(x, y) this.x += x; this.y += y; (Shape moved.);/ 第1步：定义子类构造方法：Rectangle - 子类function Rectangle() / this指向父类ShapeShape.call(this); /调用父类构造方法/ 第2步：使子类的prototype属性/对象指向父类的prototype对象/属性Rtotype = Object.create(Stotype);var rect = new Rectangle();rect instanceof Rectangle /true.rect instanceof Shape /true.rect.move(); /Outputs, Shape moved.6 实现多继承/ 使用多个call实现多继承function MyClass() SuperClass.call(this); OtherSuperClass.call(this);MyCtotype = Object.create(SuperCtotype); /inheritmixin(MyCtotype, OtherSuperCtotype); /mixinMyCtotype.myMethod = function() / do a thing;Mixin()函数的实现代码：if (!Object.create) Object.create = function (o) if (arguments.length 1) throw new Error(Object.create implementation only accepts the first parameter.); function F() F.prototype = o; return new F(); ;注：只实现了创建一个指定原型的对象的功能,而不能同时添加特定的属性,也就是没有实现原生的Object.create函数中的第二个参数.7 浏览器支持FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafariBasic support54.0 (2)911.605第4节 Object.extend()1 Object.extend()实现代码1：/ 一个静态方法表示继承, 目标对象将拥有源对象的所有属性和方法Object.extend = function(destination, source) for (var property in source) / 利用动态语言的特性, 通过赋值动态添加属性与方法destinationproperty = sourceproperty; return destination; / 返回扩展后的对象/ Object的extend实例方法Ototype.extend = function(object) return Object.extend.apply(this, this, object); 代码2：Object.extend(Object, / 一个静态方法, 传入一个对象, 返回对象的字符串表示inspect: function(object) try / 处理undefined情况if (object = undefined) return undefined; if (object = null) return null; / 处理null情况/ 如果对象定义了inspect方法, 则调用该方法返回, 否则返回对象的toString()值return object.inspect ? object.inspect() : object.toString(); catch (e) / 处理异常情况if (e instanceof RangeError) return .; throw e;,keys: function(object) / 一个静态方法, 传入一个对象, 返回该对象中所有的属性, 构成数组返回var keys = ;for (var property in object)keys.push(property); / 将每个属性压入到一个数组中 return keys;,/ 一个静态方法, 传入一个对象, 返回该对象中所有属性所对应的值, / 构成数组返回values: function(object) var values = ;/ 将每个属性的值压入到一个数组中for (var property in object) values.push(objectproperty);return values;,/ 一个静态方法, 传入一个对象, 克隆一个新对象并返回clone: function(object) return Object.extend(, object););2 JavaScript类2.1 静态成员/ 给function增加静态成员memberfunction.member=function() 2.2 实例成员代码1：totype.member=function() 代码2：totype= member1:function(), member2:abc, member3:function() 实例方法中就可以引用this指针，指向由这个类实例化的对象本身。2.3 prototype定义prototype是任何一个类（函数）内部保留的一个静态成员。它的功能就是存储这个类的所有成员指针，但这些成员都只是原型，没有经过初始化2.4 枚举变量的所有成员for(var p in object)功能：列举一个变量的所有成员。 若变量为函数，则列出所有静态成员。 若变量为对象，则列出所有实例成员。 p为字符串类型，表示成员名称。 引用成员格式：variabel.member，variabelmember。2.5 apply()方法格式：method.apply(object,arguments); 意义：将method这个方法应用到object去执行，参数是arguments这个数组。注意：method并不是object的成员。等价于object.method(arguments)。调用者：apply()方法的调用