失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 下面属于javascript内部对象的有_JavaScript从零开始——面向对象编程(2)

下面属于javascript内部对象的有_JavaScript从零开始——面向对象编程(2)

时间:2019-06-11 16:42:51

相关推荐

下面属于javascript内部对象的有_JavaScript从零开始——面向对象编程(2)

之前一章节提到了构造函数和类,其中有几个重点放在接下来的两部分提一下,主要是this关键字(ES 5就已经有了)的使用,对象的继承以及类(ES 6开始引入)的继承,这里先来看看this和对象的继承。

1 this 关键字

1.1 概念

this关键字是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。

前一章已经提到,this可以用在构造函数之中,表示实例对象。除此之外,this还可以用在别的场合。但不管是什么场合,this都有一个共同点:它总是返回一个对象。

简单说,this就是属性或方法“当前”所在的对象。

this.property

上面代码中,this就代表property属性当前所在的对象。

下面是一个实际的例子:

上面代码中,this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用,而describe方法所在的当前对象是person,因此this指向person,this.name就是person.name。

由于对象的属性可以赋给另一个对象,所以属性所在的当前对象是可变的,即this的指向是可变的:

上面代码中,person.describe属性被赋给person1,于是person1.describe就表示describe方法所在的当前对象是person1,所以this.name就指向person1.name。

稍稍重构这个例子,this的动态指向就能看得更清楚:

上面代码中,函数f内部使用了this关键字,随着f所在的对象不同,this的指向也不同。

只要函数被赋给另一个变量,this的指向就会变:

上面代码中,person.describe被赋值给变量f,内部的this就会指向f运行时所在的对象(这里因为使用let进行变量声明,所以最开始的name并没有提升到顶层,所以使用了this.name = name这一方式,声明了顶层变量,才有了f第二次运行时的结果)。

这也是为什么我们会尽量使用let和const关键字来声明变量的原因,这样所声明的变量不会产生升级的现象,对于实际使用来说是非常有利的。

再看一个网页编程的例子:

<input type="text" name="age" size=3 onChange="validate(this, 18, 99);"><script>function validate(obj, lowval, hival){if ((obj.value < lowval) || (obj.value > hival))console.log('Invalid Value!');}</script>

上面代码是一个文本输入框,每当用户输入一个值,就会调用onChange回调函数,验证这个值是否在指定范围。浏览器会向回调函数传入当前对象,因此this就代表传入当前对象(即文本框),然后就可以从this.value上面读到用户的输入值。

总结一下,JavaScript语言之中,一切皆对象,运行环境也是对象,所以函数都是在某个对象之中运行,this就是函数运行时所在的对象(环境)。这本来并不会让用户糊涂,但是JavaScript支持运行环境动态切换,也就是说,this的指向是动态的,没有办法事先确定到底指向哪个对象,这才是最让初学者感到困惑的地方。

1.2 实质

JavaScript语言之所以有this的设计,跟内存里面的数据结构有关系。

const obj = {foo: 5 };

上面的代码将一个对象赋值给变量obj。JavaScript引擎会先在内存里面,生成一个对象{ foo: 5 },然后把这个对象的内存地址赋值给变量obj。也就是说,变量obj是一个地址(reference)。后面如果要读取obj.foo,引擎先从obj拿到内存地址,然后再从该地址读出原始的对象,返回它的foo属性。

原始的对象以字典结构保存,每一个属性名都对应一个属性描述对象。举例来说,上面例子的foo属性,实际上是以下面的形式保存的:

{foo: {[[value]]: 5[[writable]]: true[[enumerable]]: true[[configurable]]: true}}

注意,foo属性的值保存在属性描述对象的value属性里面。

这样的结构是很清晰的,问题在于属性的值可能是一个函数:

const obj = {foo: function () {} };

这时,引擎会将函数单独保存在内存中,然后再将函数的地址赋值给foo属性的value属性:

{foo: {[[value]]: 函数的地址...}}

由于函数是一个单独的值,所以它可以在不同的环境(上下文)执行:

const f = function () {};const obj = {f: f };// 单独执行f()// obj 环境执行obj.f()

JavaScript允许在函数体内部,引用当前环境的其他变量:

const f = function () {console.log(x);};

上面代码中,函数体里面使用了变量x。该变量由运行环境提供。

现在问题就来了,由于函数可以在不同的运行环境执行,所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境:

const f = function () {console.log(this.x);}

上面代码中,函数体里面的this.x就是指当前运行环境的x:

const f = function () {console.log(this.x);}let x = 1;const obj = {f: f,x: 2,};// 单独执行f() // 1// obj 环境执行obj.f() // 2

上面代码中,函数f在全局环境执行,this.x指向全局环境的x;在obj环境执行,this.x指向obj.x。

1.3 使用场合

this主要有以下几个使用场合。

(1)全局环境

全局环境使用this,它指的就是顶层对象window:

上面代码说明,不管是不是在函数内部,只要是在全局环境下运行,this就是指顶层对象window。

(2)构造函数

构造函数中的this,指的是实例对象:

const Obj = function (p) {this.p = p;};

上面代码定义了一个构造函数Obj。由于this指向实例对象,所以在构造函数内部定义this.p,就相当于定义实例对象有一个p属性:

(3)对象的方法

如果对象的方法里面包含this,this的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变this的指向。

但是,这条规则很不容易把握。请看下面的代码:

上面代码中,obj.foo方法执行时,它内部的this指向obj自身。

但是,下面这几种用法,都会改变this的指向。

上面代码中,obj.foo就是一个值。这个值真正调用的时候,运行环境已经不是obj了,而是全局环境,所以this不再指向obj。

可以这样理解,JavaScript引擎内部,obj和obj.foo储存在两个内存地址,称为地址一和地址二。obj.foo()这样调用时,是从地址一调用地址二,因此地址二的运行环境是地址一,this指向obj。但是,上面三种情况,都是直接取出地址二进行调用,这样的话,运行环境就是全局环境,因此this指向全局环境。上面三种情况等同于下面的代码:

// 情况一(obj.foo = function () {console.log(this);})()// 等同于(function () {console.log(this);})()// 情况二(false || function () {console.log(this);})()// 情况三(1, function () {console.log(this);})()

如果this所在的方法不在对象的第一层,这时this只是指向当前一层的对象,而不会继承更上面的层:

上面代码中,a.b.m方法在a对象的第二层,该方法内部的this不是指向a,而是指向a.b,因为实际执行的是下面的代码clear:

const b = {m: function() {console.log(this.p);}};const a = {p: 'Hello',b: b};(a.b).m() // 等同于 b.m()

如果要达到预期效果,只有写成下面这样:

const a = {b: {m: function() {console.log(this.p);},p: 'Hello'}};

如果这时将嵌套对象内部的方法赋值给一个变量,this依然会指向全局对象:

上面代码中,m是多层对象内部的一个方法。为求简便,将其赋值给hello变量,结果调用时,this指向了顶层对象。为了避免这个问题,可以只将m所在的对象赋值给hello,这样调用时,this的指向就不会变:

1.4 使用注意点

(1)避免多层 this

由于this的指向是不确定的,所以切勿在函数中包含多层的this:

上面代码包含两层this,结果运行后,第一层指向对象o,第二层指向全局对象,因为实际执行的是下面的代码:

let temp = function () {console.log(this);};let o = {f1: function () {console.log(this);var f2 = temp();}}

一个解决方法是在第二层改用一个指向外层this的变量:

上面代码定义了变量that,固定指向外层的this,然后在内层使用that,就不会发生this指向的改变。

事实上,使用一个变量固定this的值,然后内层函数调用这个变量,是非常常见的做法,请务必掌握。

JavaScript提供了严格模式,也可以硬性避免这种问题。严格模式下,如果函数内部的this指向顶层对象,就会报错:

上面代码中,inc方法通过'use strict'声明采用严格模式,这时内部的this一旦指向顶层对象,就会报错。

(2)避免数组处理方法中的 this

数组的map和foreach方法,允许提供一个函数作为参数。这个函数内部不应该使用this:

上面代码中,foreach方法的回调函数中的this,其实是指向window对象,因此取不到o.v的值。原因跟上一段的多层this是一样的,就是内层的this不指向外部,而指向顶层对象。

解决这个问题的一种方法,就是前面提到的,使用中间变量固定this:

另一种方法是将this当作foreach方法的第二个参数,固定它的运行环境:

(3)避免回调函数中的 this

回调函数中的this往往会改变指向,最好避免使用:

let o = new Object();o.f = function () {console.log(this === o);}// jQuery 的写法$('#button').on('click', o.f);

上面代码中,点击按钮以后,控制台会显示false。原因是此时this不再指向o对象,而是指向按钮的DOM对象,因为f方法是在按钮对象的环境中被调用的。这种细微的差别,很容易在编程中忽视,导致难以察觉的错误。

为了解决这个问题,可以采用下面的一些方法对this进行绑定,也就是使得this固定指向某个对象,减少不确定性。

1.5 绑定 this 的方法

this的动态切换,固然为JavaScript创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把this固定下来,避免出现意想不到的情况。JavaScript提供了call、apply、bind这三个方法,来切换/固定this的指向。

(1)Function.prototype.call()

函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数:

上面代码中,全局环境运行函数f时,this指向全局环境(浏览器为window对象);call方法可以改变this的指向,指定this指向对象obj,然后在对象obj的作用域中运行函数f。

call方法的参数,应该是一个对象。如果参数为空、null和undefined,则默认传入全局对象:

上面代码中,a函数中的this关键字,如果指向全局对象,返回结果为123。如果使用call方法将this关键字指向obj对象,返回结果为456。可以看到,如果call方法没有参数,或者参数为null或undefined,则等同于指向全局对象。

如果call方法的参数是一个原始值,那么这个原始值会自动转成对应的包装对象,然后传入call方法:

上面代码中,call的参数为5,不是对象,会被自动转成包装对象(Number的实例),绑定f内部的this。

call方法还可以接受多个参数:

func.call(thisValue, arg1, arg2, ...)

call的第一个参数就是this所要指向的那个对象,后面的参数则是函数调用时所需的参数:

上面代码中,call方法指定函数add内部的this绑定当前环境(对象),并且参数为1和2,因此函数add运行后得到3。

call方法的一个应用是调用对象的原生方法:

上面代码中,hasOwnProperty是obj对象继承的方法,如果这个方法一旦被覆盖,就不会得到正确结果。call方法可以解决这个问题,它将hasOwnProperty方法的原始定义放到obj对象上执行,这样无论obj上有没有同名方法,都不会影响结果。

(2)Function.prototype.apply()

apply方法的作用与call方法类似,也是改变this指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数,使用格式如下:

func.apply(thisValue, [arg1, arg2, ...])

apply方法的第一个参数也是this所要指向的那个对象,如果设为null或undefined,则等同于指定全局对象。第二个参数则是一个数组,该数组的所有成员依次作为参数,传入原函数。原函数的参数,在call方法中必须一个个添加,但是在apply方法中,必须以数组形式添加:

上面代码中,f函数本来接受两个参数,使用apply方法以后,就变成可以接受一个数组作为参数。

利用这一点,可以做一些有趣的应用。

(2.1)找出数组最大元素

JavaScript不提供找出数组最大元素的函数。结合使用apply方法和Math.max方法,就可以返回数组的最大元素:

(2.2)将数组的空元素变为undefined

通过apply方法,利用Array构造函数将数组的空元素变成undefined:

空元素与undefined的差别在于,数组的forEach方法会跳过空元素,但是不会跳过undefined。因此,遍历内部元素的时候,会得到不同的结果:

(2.3)转换类似数组的对象

另外,利用数组对象的slice方法,可以将一个类似数组的对象(比如arguments对象)转为真正的数组:

上面代码的apply方法的参数都是对象,但是返回结果都是数组,这就起到了将对象转成数组的目的。从上面代码可以看到,这个方法起作用的前提是,被处理的对象必须有length属性,以及相对应的数字键。

(2.4)绑定回调函数的对象

前面的按钮点击事件的例子,可以改写如下:

let o = new Object();o.f = function () {console.log(this === o);}let f = function (){o.f.apply(o);// 或者 o.f.call(o);};// jQuery 的写法$('#button').on('click', f);

上面代码中,点击按钮以后,控制台将会显示true。由于apply()方法(或者call()方法)不仅绑定函数执行时所在的对象,还会立即执行函数,因此不得不把绑定语句写在一个函数体内。更简洁的写法是采用下面介绍的bind()方法。

(3)Function.prototype.bind()

bind()方法用于将函数体内的this绑定到某个对象,然后返回一个新函数:

上面代码中,我们将d.getTime()方法赋给变量print,然后调用print()就报错了。这是因为getTime()方法内部的this,绑定Date对象的实例,赋给变量print以后,内部的this已经不指向Date对象的实例了。

bind()方法可以解决这个问题:

上面代码中,bind()方法将getTime()方法内部的this绑定到d对象,这时就可以安全地将这个方法赋值给其他变量了。

bind方法的参数就是所要绑定this的对象,下面是一个更清晰的例子:

上面代码中,counter.inc()方法被赋值给变量test。这时必须用bind()方法将inc()内部的this,绑定到counter,否则就会出错。

this绑定到其他对象也是可以的:

上面代码中,bind()方法将inc()方法内部的this,绑定到obj对象。结果调用test函数以后,递增的就是obj内部的count属性。

bind()还可以接受更多的参数,将这些参数绑定原函数的参数:

上面代码中,bind()方法除了绑定this对象,还将add()函数的第一个参数x绑定成5,然后返回一个新函数newAdd(),这个函数只要再接受一个参数y就能运行了。

如果bind()方法的第一个参数是null或undefined,等于将this绑定到全局对象,函数运行时this指向顶层对象(浏览器为window):

上面代码中,函数add()内部并没有this,使用bind()方法的主要目的是绑定参数x,以后每次运行新函数test(),就只需要提供另一个参数y就够了。而且因为add()内部没有this,所以bind()的第一个参数是null,不过这里如果是其他对象,也没有影响。

bind()方法有一些使用注意点。

(3.1)每一次返回一个新函数

bind()方法每运行一次,就返回一个新函数,这会产生一些问题。比如,监听事件的时候,不能写成下面这样。

element.addEventListener('click', o.m.bind(o));

上面代码中,click事件绑定bind()方法生成的一个匿名函数。这样会导致无法取消绑定,所以下面的代码是无效的:

element.removeEventListener('click', o.m.bind(o));

正确的方法是写成下面这样:

let listener = o.m.bind(o);element.addEventListener('click', listener);// ...element.removeEventListener('click', listener);

(3.2)结合回调函数使用

回调函数是JavaScript最常用的模式之一,但是一个常见的错误是,将包含this的方法直接当作回调函数。解决方法就是使用bind()方法,将counter.inc()绑定counter:

上面代码中,callIt()方法会调用回调函数。这时如果直接把counter.inc传入,调用时counter.inc()内部的this就会指向全局对象。使用bind()方法将counter.inc绑定counter以后,就不会有这个问题,this总是指向counter。

还有一种情况比较隐蔽,就是某些数组方法可以接受一个函数当作参数。这些函数内部的this指向,很可能也会出错:

上面代码中,obj.print内部this.times的this是指向obj的,这个没有问题。但是,forEach()方法的回调函数内部的this.name却是指向全局对象,导致没有办法取到值。稍微改动一下,就可以看得更清楚:

解决这个问题,也是通过bind()方法绑定this:

(3.3)结合call()方法使用

利用bind()方法,可以改写一些JavaScript原生方法的使用形式,以数组的slice()方法为例:

上面的代码中,数组的slice方法从[1, 2, 3]里面,按照指定的开始位置和结束位置,切分出另一个数组。这样做的本质是在[1, 2, 3]上面调用Array.prototype.slice()方法,因此可以用call方法表达这个过程,得到同样的结果:

call()方法实质上是调用Function.prototype.call()方法,因此上面的表达式可以用bind()方法改写:

上面代码的含义就是,将Array.prototype.slice变成Function.prototype.call方法所在的对象,调用时就变成了Array.prototype.slice.call。类似的写法还可以用于其他数组方法:

如果再进一步,将Function.prototype.call方法绑定到Function.prototype.bind对象,就意味着bind的调用形式也可以被改写:

上面代码的含义就是,将Function.prototype.bind方法绑定在Function.prototype.call上面,所以bind方法就可以直接使用,不需要在函数实例上使用。

2 对象的继承

面向对象编程很重要的一个方面,就是对象的继承。A对象通过继承B对象,就能直接拥有B对象的所有属性和方法。这对于代码的复用是非常有用的。

大部分面向对象的编程语言,都是通过“类”(class)实现对象的继承。传统上,JavaScript语言的继承不通过class,而是通过“原型对象”(prototype)实现,本章介绍JavaScript的原型链继承。

前文说明过,ES 6引入了class语法,基于class的继承请查看下一章节。

3.1 原型对象概述

(1)构造函数的缺点

JavaScript通过构造函数生成新对象,因此构造函数可以视为对象的模板。实例对象的属性和方法,可以定义在构造函数内部:

上面代码中,Cat函数是一个构造函数,函数内部定义了name属性和color属性,所有实例对象(上例是cat1)都会生成这两个属性,即这两个属性会定义在实例对象上面。

通过构造函数为实例对象定义属性,虽然很方便,但是有一个缺点。同一个构造函数的多个实例之间,无法共享属性,从而造成对系统资源的浪费:

上面代码中,cat1和cat2是同一个构造函数的两个实例,它们都具有meow方法。由于meow方法是生成在每个实例对象上面,所以两个实例就生成了两次。也就是说,每新建一个实例,就会新建一个meow方法。这既没有必要,又浪费系统资源,因为所有meow方法都是同样的行为,完全应该共享。

这个问题的解决方法,就是JavaScript的原型对象(prototype)。

(2)prototype 属性的作用

JavaScript继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享。也就是说,如果属性和方法定义在原型上,那么所有实例对象就能共享,不仅节省了内存,还体现了实例对象之间的联系。

下面,先看怎么为对象指定原型。JavaScript规定,每个函数都有一个prototype属性,指向一个对象:

上面代码中,函数f默认具有prototype属性,指向一个对象。

对于普通函数来说,该属性基本无用。但是,对于构造函数来说,生成实例的时候,该属性会自动成为实例对象的原型:

上面代码中,构造函数Animal的prototype属性,就是实例对象cat1和cat2的原型对象。原型对象上添加一个color属性,结果,实例对象都共享了该属性。

原型对象的属性不是实例对象自身的属性。只要修改原型对象,变动就立刻会体现在所有实例对象上。

上面代码中,原型对象的color属性的值变为yellow,两个实例对象的color属性立刻跟着变了。这是因为实例对象其实没有color属性,都是读取原型对象的color属性。也就是说,当实例对象本身没有某个属性或方法的时候,它会到原型对象去寻找该属性或方法。这就是原型对象的特殊之处。

如果实例对象自身就有某个属性或方法,它就不会再去原型对象寻找这个属性或方法:

上面代码中,实例对象cat1的color属性改为black,就使得它不再去原型对象读取color属性,后者的值依然为yellow。

总结一下,原型对象的作用,就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因,而实例对象可以视作从原型对象衍生出来的子对象:

Animal.prototype.walk = function () {console.log(this.name + ' is walking');};

上面代码中,Animal.prototype对象上面定义了一个walk方法,这个方法将可以在所有Animal实例对象上面调用。

(3)原型链

JavaScript规定,所有对象都有自己的原型对象(prototype)。一方面,任何一个对象,都可以充当其他对象的原型;另一方面,由于原型对象也是对象,所以它也有自己的原型。因此,就会形成一个“原型链”(prototype chain):对象到原型,再到原型的原型……

如果一层层地上溯,所有对象的原型最终都可以上溯到Object.prototype,即Object构造函数的prototype属性。也就是说,所有对象都继承了Object.prototype的属性。这就是所有对象都有valueOf和toString方法的原因,因为这是从Object.prototype继承的。

那么,Object.prototype对象有没有它的原型呢?回答是Object.prototype的原型是null。null没有任何属性和方法,也没有自己的原型。因此,原型链的尽头就是null:

上面代码表示,Object.prototype对象的原型是null,由于null没有任何属性,所以原型链到此为止。Object.getPrototypeOf方法返回参数对象的原型,具体介绍请看后文。

读取对象的某个属性时,JavaScript引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到,则返回undefined。如果对象自身和它的原型,都定义了一个同名属性,那么优先读取对象自身的属性,这叫做“覆盖”(overriding)。

注意,一级级向上,在整个原型链上寻找某个属性,对性能是有影响的。所寻找的属性在越上层的原型对象,对性能的影响越大。如果寻找某个不存在的属性,将会遍历整个原型链。

举例来说,如果让构造函数的prototype属性指向一个数组,就意味着实例对象可以调用数组方法:

上面代码中,me是构造函数MyArray的实例对象,由于MyArray.prototype指向一个数组实例,使得me可以调用数组方法(这些方法定义在数组实例的prototype对象上面)。最后那行instanceof表达式,用来比较一个对象是否为某个构造函数的实例,结果就是证明me为Array的实例,instanceof运算符的详细解释详见后文。

上面代码还出现了原型对象的constructor属性,这个属性的含义下一节就来解释。

(4)constructor 属性

prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数:

由于constructor属性定义在prototype对象上面,意味着可以被所有实例对象继承:

上面代码中,p是构造函数P的实例对象,但是p自身没有constructor属性,该属性其实是读取原型链上面的P.prototype.constructor属性。

constructor属性的作用是,可以得知某个实例对象,到底是哪一个构造函数产生的:

上面代码中,constructor属性确定了实例对象f的构造函数是F,而不是RegExp。

另一方面,有了constructor属性,就可以从一个实例对象新建另一个实例:

上面代码中,x是构造函数Constr的实例,可以从x.constructor间接调用构造函数。这使得在实例方法中,调用自身的构造函数成为可能:

Constr.prototype.createCopy = function () {return new this.constructor();};

上面代码中,createCopy方法调用构造函数,新建另一个实例。

constructor属性表示原型对象与构造函数之间的关联关系,如果修改了原型对象,一般会同时修改constructor属性,防止引用的时候出错:

上面代码中,构造函数Person的原型对象改掉了,但是没有修改constructor属性,导致这个属性不再指向Person。由于Person的新原型是一个普通对象,而普通对象的constructor属性指向Object构造函数,导致Person.prototype.constructor变成了Object。

所以,修改原型对象时,一般要同时修改constructor属性的指向:

// 坏的写法C.prototype = {method1: function (...) {... },// ...};// 好的写法C.prototype = {constructor: C,method1: function (...) {... },// ...};// 更好的写法C.prototype.method1 = function (...) {... };

上面代码中,要么将constructor属性重新指向原来的构造函数,要么只在原型对象上添加方法,这样可以保证instanceof运算符不会失真。

如果不能确定constructor属性是什么函数,还有一个办法:通过name属性,从实例得到构造函数的名称:

2.2 instanceof 运算符

instanceof运算符返回一个布尔值,表示对象是否为某个构造函数的实例:

上面代码中,对象v是构造函数Vehicle的实例,所以返回true。

instanceof运算符的左边是实例对象,右边是构造函数。它会检查右边构建函数的原型对象(prototype),是否在左边对象的原型链上。因此,下面两种写法是等价的:

v instanceof Vehicle// 等同于Vehicle.prototype.isPrototypeOf(v)

上面代码中,Object.prototype.isPrototypeOf的详细解释见后文。

由于instanceof检查整个原型链,因此同一个实例对象,可能会对多个构造函数都返回true:

上面代码中,d同时是Date和Object的实例,因此对这两个构造函数都返回true。

由于任意对象(除了null)都是Object的实例,所以instanceof运算符可以判断一个值是否为非null的对象:

上面代码中,除了null,其他对象的instanceOf Object的运算结果都是true。

instanceof的原理是检查右边构造函数的prototype属性,是否在左边对象的原型链上。有一种特殊情况,就是左边对象的原型链上,只有null对象。这时,instanceof判断会失真:

上面代码中,Object.create(null)返回一个新对象obj,它的原型是null(Object.create的详细介绍见后文)。右边的构造函数Object的prototype属性,不在左边的原型链上,因此instanceof就认为obj不是Object的实例。但是,只要一个对象的原型不是null,instanceof运算符的判断就不会失真。

instanceof运算符的一个用处,是判断值的类型:

上面代码中,instanceof运算符判断,变量x是数组,变量y是对象。

注意,instanceof运算符只能用于对象,不适用原始类型的值:

上面代码中,字符串不是String对象的实例(因为字符串不是对象),所以返回false。

此外,对于undefined和null,instanceof运算符总是返回false:

利用instanceof运算符,还可以巧妙地解决,调用构造函数时,忘了加new命令的问题:

function Fubar (foo, bar) {if (this instanceof Fubar) {this._foo = foo;this._bar = bar;} else {return new Fubar(foo, bar);}}

上面代码使用instanceof运算符,在函数体内部判断this关键字是否为构造函数Fubar的实例。如果不是,就表明忘了加new命令。

2.3 构造函数的继承

让一个构造函数继承另一个构造函数,是非常常见的需求。这可以分成两步实现。第一步是在子类的构造函数中,调用父类的构造函数:

function Sub(value) {Super.call(this);this.prop = value;}

上面代码中,Sub是子类的构造函数,this是子类的实例。在实例上调用父类的构造函数Super,就会让子类实例具有父类实例的属性。

第二步,是让子类的原型指向父类的原型,这样子类就可以继承父类原型:

Sub.prototype = Object.create(Super.prototype);Sub.prototype.constructor = Sub;Sub.prototype.method = '...';

上面代码中,Sub.prototype是子类的原型,要将它赋值为Object.create(Super.prototype),而不是直接等于Super.prototype。否则后面两行对Sub.prototype的操作,会连父类的原型Super.prototype一起修改掉。

另外一种写法是Sub.prototype等于一个父类实例:

Sub.prototype = new Super();

上面这种写法也有继承的效果,但是子类会具有父类实例的方法。有时,这可能不是我们需要的,所以不推荐使用这种写法。

举例来说,下面是一个Shape构造函数:

function Shape() {this.x = 0;this.y = 0;}Shape.prototype.move = function (x, y) {this.x += x;this.y += y;console.info('Shape moved.');};

我们需要让Rectangle构造函数继承Shape:

// 第一步,子类继承父类的实例function Rectangle() {Shape.call(this); // 调用父类构造函数}// 另一种写法function Rectangle() {this.base = Shape;this.base();}// 第二步,子类继承父类的原型Rectangle.prototype = Object.create(Shape.prototype);Rectangle.prototype.constructor = Rectangle;

采用这样的写法以后,instanceof运算符会对子类和父类的构造函数,都返回true:

上面代码中,子类是整体继承父类。有时只需要单个方法的继承,这时可以采用下面的写法:

ClassB.prototype.print = function() {ClassA.prototype.print.call(this);// some code}

上面代码中,子类B的print方法先调用父类A的print方法,再部署自己的代码。这就等于继承了父类A的print方法。

2.4 多重继承

JavaScript不提供多重继承功能,即不允许一个对象同时继承多个对象。但是,可以通过变通方法,实现这个功能:

上面代码中,子类S同时继承了父类M1和M2。这种模式又称为Mixin(混入)。

2.5 模块

随着网站逐渐变成“互联网应用程序”,嵌入网页的 JavaScript 代码越来越庞大,越来越复杂。网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等……开发者必须使用软件工程的方法,管理网页的业务逻辑。

JavaScript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。

但是,JavaScript在早期不是一种模块化编程语言,ES 6才开始支持“类”和“模块”。下面介绍传统的做法,如何利用对象实现模块的效果。

(1)基本的实现方法

模块是实现特定功能的一组属性和方法的封装。

简单的做法是把模块写成一个对象,所有的模块成员都放到这个对象里面:

let module1 = new Object({_count : 0,m1 : function (){//...},m2 : function (){//...}});

上面的函数m1和m2,都封装在module1对象里。使用的时候,就是调用这个对象的属性:

module1.m1();

但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值:

module1._count = 5;

(2)封装私有变量:构造函数的写法

我们可以利用构造函数,封装私有变量:

function StringBuilder() {var buffer = [];this.add = function (str) {buffer.push(str);};this.toString = function () {return buffer.join('');};}

上面代码中,buffer是模块的私有变量。一旦生成实例对象,外部是无法直接访问buffer的。但是,这种方法将私有变量封装在构造函数中,导致构造函数与实例对象是一体的,总是存在于内存之中,无法在使用完成后清除。这意味着,构造函数有双重作用,既用来塑造实例对象,又用来保存实例对象的数据,违背了构造函数与实例对象在数据上相分离的原则(即实例对象的数据,不应该保存在实例对象以外)。同时,非常耗费内存:

function StringBuilder() {this._buffer = [];}StringBuilder.prototype = {constructor: StringBuilder,add: function (str) {this._buffer.push(str);},toString: function () {return this._buffer.join('');}};

这种方法将私有变量放入实例对象中,好处是看上去更自然,但是它的私有变量可以从外部读写,不是很安全。

(3)封装私有变量:立即执行函数的写法

另一种做法是使用“立即执行函数”(Immediately-Invoked Function Expression,IIFE),将相关的属性和方法封装在一个函数作用域里面,可以达到不暴露私有成员的目的:

let module1 = (function () {let _count = 0;let m1 = function () {//...};let m2 = function () {//...};return {m1 : m1,m2 : m2};})();

使用上面的写法,外部代码无法读取内部的_count变量:

上面的module1就是JavaScript模块的基本写法。下面,再对这种写法进行加工。

(4)模块的放大模式

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用“放大模式”(augmentation):

let module1 = (function (mod){mod.m3 = function () {//...};return mod;})(module1);

上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块。

在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上面的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"(Loose augmentation):

var module1 = (function (mod) {//...return mod;})(window.module1 || {});

与"放大模式"相比,“宽放大模式”就是“立即执行函数”的参数可以是空对象。

(5)输入全局变量

独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量,必须显式地将其他变量输入模块:

let module1 = (function ($, YAHOO) {//...})(jQuery, YAHOO);

上面的module1模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module1。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。

立即执行函数还可以起到命名空间的作用:

(function($, window, document) {function go(num) {}function handleEvents() {}function initialize() {}function dieCarouselDie() {}//attach to the global scopewindow.finalCarousel = {init : initialize,destroy : dieCarouselDie}})( jQuery, window, document );

上面代码中,finalCarousel对象输出到全局,对外暴露init和destroy接口,内部方法go、handleEvents、initialize、dieCarouselDie都是外部无法调用的。

如果觉得《下面属于javascript内部对象的有_JavaScript从零开始——面向对象编程(2)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。