下面属于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)相关推荐
- 下面属于javascript内部对象的有_JavaScript quot;thisquot;原理-转载阮一峰
作者: 阮一峰 JavaScript 的 this 原理www.ruanyifeng.com 一.问题的由来 学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果. v ...
- 成为javascript大神要掌握,面向对象编程技术、面向方面编程技术和函数式编程技术
面向对象编程技术.面向方面编程技术和函数式编程技术 mart一下,面向对象,面向切面,有一定的了解,函数式编程没接触过,得安排时间深入下.还有元编程.
- JavaScript面向对象编程-第三版不完全系统解读
JavaScript面向对象编程-第三版不完全系统解读 作者:老九-技术大黍 产品:查看原文 社交:知乎 公众号:老九学堂(新手有福利) 特别声明:原创不易,未经授权不得转载或抄袭,如需转载可联系笔者 ...
- javascript 本地对象和内置对象_JavaScript 的面向对象
图片来源于 DigitalOcean 1. 什么是类 在说 JavaScript 的面向对象的实现方法之前,我们先来看面向对象编程的一个核心概念--类(class).类是对拥有同样属性(propert ...
- 《JavaScript面向对象编程指南》——第1章 引言1.1 回顾历史
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.1节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...
- 从零开始学习编程_如何开始学习编程
从零开始学习编程 最近有很多关于学习编程的话题. 与软件开发中的开放和待定职位相比,不仅人手不足 ,编程还是一种薪水 最高,工作满意度最高的职业 . 难怪有这么多人想要进入这个行业! 但是,究竟如何做 ...
- python从0开始学编程课件_小白从零开始学编程(三)--python基本概念
前言 从2020年3月份开始,计划写一系列文档--<小白从零开始学编程>,记录自己从0开始学习的一些东西. 第一个系列:python,计划从安装.环境搭建.基本语法.到利用Django和F ...
- JavaScript面向对象编程
自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升.JavaScript最基本的使用,以及语法.浏览器对象等等东东在这里就不累赘了.把主要篇幅放在如何实现JavaScri ...
- JavaScript 的面向对象编程
发现一个介绍JavaScript面向对象编程的文章,大家可以下下看看:http://pan.baidu.com/share/link?shareid=69566&uk=2802880612 本 ...
最新文章
- bzoj 1787 紧急集合
- sscanf,sprintf,fscanf,fprintf 系列函数
- css修改select选择框option被选中的背景颜色_这五个有用的 CSS 属性完全被我忽视了...
- 【tomcat】tomcat部署项目实验
- 牛客每日一题3.31 城市网络 树上倍增
- Linux 、shell 时间函数 - 获取七天前所在周
- PHP规范之PSR-1
- 【有限域生成】本原多项式生成有限域的原理及MATLAB实现
- MSP430 BSL 下载
- 图像处理(8)–灰度变换函数增强空间域图像
- Google 工程师亲授:菜鸟开发者一定要投资的十大目标
- GC8418 数字光纤音频解码芯片 光纤解码芯片 CS8418替代 MS8413替代
- C++ constants
- bert系列第一篇: bert进行embedding
- 见缝插针php源码,见缝插针 小游戏源码
- 西建大历年电子与通信工程复试真题_2018年上海大学电子与通信工程考研初试+复试经验贴...
- 计算机网络——网络层之移动IP
- JAVA根据省市区县获取配置文件经纬度(静态)
- 仙剑5将至 浅析国内游戏引擎发展史
- linux无显卡安装教程,无光驱无计算机显卡如何安装Linux.doc
热门文章
- java 泛型 t extends_Java泛型的定义以及对于? extends T和? super T
- 2007年8月25日华为的几个面试题
- Hadoop入门进阶步步高(三-配置Hadoop
- B1.Java基础部分二
- Python学习笔记:字符串提取和清洗
- 【hdu2481】Toy,burnside引理+矩阵乘法
- 【codevs2370】小机房的树,RMQ求LCA
- C ++ 指针 | 指针与函数、数组_3
- ithoughts怎么自定义样式_Word 表格样式,用过的人可能都会遇到这个问题
- linux服务器的诗句迁移,使用scp命令在两台linux上对拷文件或者文件夹