博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 复习之 对象的继承
阅读量:6207 次
发布时间:2019-06-21

本文共 4792 字,大约阅读时间需要 15 分钟。

一、原型对象的概述

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

function Cat(name, color) {  this.name = name;  this.color = color;  this.meow = function () {    console.log('喵喵');  };}var cat1 = new Cat('大毛', '白色');var cat2 = new Cat('二毛', '黑色');cat1.meow === cat2.meow// false复制代码

上面代码中,每新建一个实例,就会新建一个meow方法。这既没有必要,又浪费系统资源。

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

继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享。

js 中规定,每个函数都有一个prototype属性,指向一个对象。

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

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

原型链

js中规定,所有的对象都有自己的原型对象。一方面,每个对象都可以充当其他对象的原型;另一方面,由于原型对象也是对象,所以他也有自己的原型。因此,就会形成一个“原型链”:对象到原型,再到原型的原型...

原型链的尽头就是null

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

constructor 属性

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

二、instanceof 运算符

返回一个布尔值,表示对象是否为某个构造函数的实例。

instanceof运算符左边是实例对象,右边是构造函数。他会检查右边构建函数的原型对象,是否在左边对象的原型脸上。所以,下面写法是等价的

var v = new Vehicle();v instanceof Vehicle // true//等同于Vehicle.prototype.isPrototypeOf(v)复制代码

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

var d = new Date();d instanceof Date // trued instanceof Object // true复制代码

instanceof的原理是检查右边构造函数的prototype属性,是否在左边对象的原型链上。

注意:有一种特殊情况,就是左边对象的原型链上,只有null对象,这时instanceof判断会失真。

注意instanceof只能用于对象,不适用原始类型的值。

undefined instanceof Object // falsenull instanceof Object // false复制代码

三、构造函数的继承

让一个构造函数继承另一个构造函数。分两步实现:

第一步在子类的构造函数中,调用父类的构造函数。

function Sub(){    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一起修改掉。

下面写一个完整的构造函数继承:

function Shape(){    this.x = 0;    this.y = 0;}Shape.prototype.move = function(x,y){    this.x += x;    this.y += y;    console,log('Shape moved');}//第一步,让子类继承父类实例function Rectangle(){    Super.call(this);//调用父类构造函数}//第二步,子类继承父类原型Rectangle.prototype = Object.create(Shape.prototype);Rectangle.prototype.constructor = Rectangle;复制代码

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

var rect = new Rectangle();rect instanceof Rectangle  // truerect instanceof Shape  // true复制代码

四、多重继承

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

function M1() {  this.hello = 'hello';}function M2() {  this.world = 'world';}function S() {  M1.call(this);  M2.call(this);}// 继承 M1S.prototype = Object.create(M1.prototype);// 继承链上加入 M2Object.assign(S.prototype, M2.prototype);// 指定构造函数S.prototype.constructor = S;var s = new S();s.hello // 'hello's.world // 'world'复制代码

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

五、模块

传统的做法,利用对象实现模块效果。

基本实现方法

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

var module1 = new Object({ _count : 0, m1 : function (){  //... }, m2 : function (){   //... }});复制代码

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

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

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

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

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

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

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

var module1 = (function () { var _count = 0; var m1 = function () {   //... }; var m2 = function () {  //... }; return {  m1 : m1,  m2 : m2 };})();复制代码

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

模块的放大模式

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

var module1 = (function (mod){ mod.m3 = function () {  //... }; return mod;})(module1);复制代码

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

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

var module1 = (function (mod) { //... return mod;})(window.module1 || {});复制代码

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

输入全局变量

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

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

var 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 scope  window.finalCarousel = {    init : initialize,    destroy : dieCarouselDie  }})( jQuery, window, document );复制代码

上面代码中,finalCarousel对象输出到全局,对外暴露initdestroy接口,内部方法gohandleEventsinitializedieCarouselDie都是外部无法调用的。

转载于:https://juejin.im/post/5c76bc7551882540c967078f

你可能感兴趣的文章
距离的计算及分页排序
查看>>
[日常] Go语言圣经-Slice切片习题
查看>>
python while循环语句
查看>>
UI线程同步
查看>>
Centos安装zeromq, jzmq
查看>>
java的HashMap 原理
查看>>
宿主进程 [*.vshost.exe] & [*.vshost.exe.config]
查看>>
JS自学笔记01
查看>>
cin、cin.get()、cin.getline()、getline()、gets()等函数的用法
查看>>
ibatis源码学习2_初始化和配置文件解析
查看>>
剖析一个由sendfile引发的linux内核BUG
查看>>
玩转Red5+Flex(4)—— Red5配置文件之解说
查看>>
View
查看>>
NSString 小技巧
查看>>
python爬取智联招聘职位信息(单进程)
查看>>
archlinux/manjaro mysql安装[linux]
查看>>
用普通网络摄像头模拟Leap Motion追踪性能
查看>>
亲身经历——大体量公司能为程序员的生涯带来什么帮助?
查看>>
MVC、MVVM
查看>>
cocos2dx 3.x (单选,多选,复选checkBox按钮的实现) RadioButton
查看>>