昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题。

复写constructor的问题(vmwork)

我们昨天有提到「建构式函式可以透过.constructor来存取建立物件的函式以此来作类型检查。」,但是这个例子却会导致trickyMan的建构式的原型被复写,无法去判断。

function Person(){};

Person.prototype.say =“Hi”;

function trickyMan(){};

trickyMan.prototype = new Person();

var Jason = new trickyMan();

trickyMan.constructor === trickyMan;//false

所以如果在Jason物件上呼叫.constructor,会无法找到直到在Person上找到参照Person函式的constructor。

但是,这事实上是错误的,如果我问是哪个函式建立了Jason物件,会得到Person这可能会产生一些Bug。

幸好在JS中,物件的每个属性都有一个属性描述子(property desciptor),可以够过它设定以下键值:

configurable设定

true -表属性描述子可被修改及删除

false -上述两个动作都将被禁止

enumerable列举

true -属性能在物件的for-in循环操作中出现

value

设定属性的键值

writable写入

true -表可以透过设值叙述来修改属性值

get

定义取值(getter)函式,可用来取得属性值。无法与value及writable一起设定

set

定义设值(setter)函式,可以用来对属性指派一个值。无法与value及writable一起设定

先来个简单的例子:

Jason.age = 29;

age这个属性会是可设定、可列举并且可写入的,它的值被设为29,get和set函式则会是undefined。

如果要对上述设定值做更动的话,可以用Object.defineProperty:

var Jason = {};

Jason.say =“R~”;

Object.defineProperty(Jason,“age”,{

configurable:false,

enumerable:false,

value:29,

writable:true

});

console.log(“age”in Jason);

for(let key in Jason){

console.log(key);

}

好,现在我知道有这东西了,但这跟一开始说的constructor有关系吗?

当然有!我们试着用trickyMan扩展(extend)Person时(也可以说是让trickyMan成为Person的子类别),就失去原本保存在constructor属性上的trickyMan原型。

我们可以用Object.defineProperty在新的trickyMan.prototype上定义一个新的constructor属性。

function Person(){};

Person.prototype.say =“Hi”;

function trickyMan(){};

trickyMan.prototype = new Person();

Object.defineProperty(trickyMan,“constructor”,{

enumerable:false,

value:trickyMan,

writable:true

});

var Jason = new trickyMan();

trickyMan.constructor === trickyMan;//true

那么,今天就到这边,一样如果有错误及来源未附上也欢迎留言指正,那么我们明天见(leafor)。

学JS的心路历程-物件与原型(三)的更多相关文章

  1. 学JS的心路历程 -物件与原型(二)

    昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...

  2. 学JS的心路历程-物件与原型(一)

    前两天说明面向对象的三大特性及JS不符合面向对象,只能称作支持面向对象而已,今天我们来看看JS的原型继承. 首先我们先来看,什么是原型(vmwork): 两个物件之间的原型关系(prototype r ...

  3. 学JS的心路历程 -函式(三)this

    this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...

  4. 学JS的心路历程 - PixiJS -基础(三)

    今天我们来试着移动图片吧! 首先,一样先把图片放到PIXI的stage中: let app = new PIXI.Application({ width: 800, height: 600, back ...

  5. 学JS的心路历程 - JS的Class

    没错,你没有看错,虽然前面说JS是原型继承,但在ES6以后新增了class关键字!!! 不过底层实作仍然是以原型继承方式进行,所以基本上算是一个语法糖. 今天我们就来看一下如何使用吧! class 首 ...

  6. 学JS的心路历程-JS支持面向对象?(二)

    昨天讲了面向对象的继承,今天我们来谈谈多态和封装吧! 多态polymorphism 抽象讲法解释,就是使用单一界面操作多种型态的物件 继承父类别,定义与父类别中相同的方法,但实作内容不同,称为复写(o ...

  7. 学JS的心路历程-JS支持面向对象?(一)

    昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...

  8. 学JS的心路历程-for of和for in

    我们在刚入门JS时候,说到要跑出数组的每个值肯定都是这样子: var arr = [1,2,3,4,5,6]: for(let i = 0:i < arr.length:i++){ consol ...

  9. 学JS的心路历程Day26 - PixiJS -入坑

    后来知道也可以透过canvas让网页动起来! 而PixiJS是使用WebGL在canvas上绘制内容与制作动态 且同时有下列特色: 支持多点触控 掩码与混合模式 可外加WebGL滤镜 多装置支持 等等 ...

随机推荐

  1. Django中的路由系统:urls

    Django的路由系统 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 你就是以这种方式告诉Django,对于这个URL调用 ...

  2. concurrent.futures模块 -----进程池 ---线程池 ---回调

    concurrent.futures模块提供了高度封装的异步调用接口,它内部有关的两个池 ThreadPoolExecutor:线程池,提供异步调用,其基础就是老版的Pool ProcessPoolE ...

  3. 插入排序(直接插入、折半、Shell)

    直接插入排序(顺序插入排序) 基本思想: 排序过程,整个排序过程为n-1趟插入,即先将序列中的第1个元素看成是一个有序子序列,然后从第2个元素开始,逐个进行插入,直至整个序列有序. 在有序序列中插入一 ...

  4. c#生成cad缩略图或者图片

    struct BITMAPFILEHEADER{public short bfType;public int bfSize;public short bfReserved1;public short ...

  5. lampp中的ftp使用介绍

    搭建完毕lampp 具体要求如下:使用Lampp的proftpd,开通多个FTP用户,并各分配一个目录,而且需要限制用户在自己的目录里面,可以自由读写. 操作步骤:第一步:设置ftp用户组,输入命令: ...

  6. Flutter实例一--底部规则导航栏制作

    先来看看制作效果: 前置知识--StatefulWidget  StatefulWidget具有可变状态(state)的窗口组件(widget).使用时要根据变化状态,调整State值, 能够快速初始 ...

  7. Impala SQL 使用小记

    1.  impala端创建的表,DROP. hive会自动同步到. 但是通过hive DROP时,数据还会在,只是表的元数据没有了. 所以完全DROP表,需要impala端的DROP 2. impal ...

  8. hive-client heap内存大小的配置优先级

    hive-client Heap大小的配置优先级 其实主要解决,hive作为数据仓库(hive -e "select ····") 如果是分区表且分区较多可能导致hive 堆内存溢 ...

  9. scrapy之如何迭代spider 的parse函数生成器

    Engine.py (core):        d = self.scraper.enqueue_scrape(response, request, spider) def _handle_down ...

  10. 机器学习进阶-图像形态学操作-开运算与闭运算 1.cv2.morphologyEx(进行各类形态学变化) 2.op=cv2.MORPH_OPEN(先腐蚀后膨胀) 3.op=cv2.MORPH_CLOSE(先膨胀后腐蚀)

    1.cv2.morphologyEx(src, op, kernel) 进行各类形态学的变化 参数说明:src传入的图片,op进行变化的方式, kernel表示方框的大小 2.op =  cv2.MO ...