重写prototype原型后哪些东西改变了
参考《JavaScript高级教程》实例看:
1.重写原型对象后,首先原型对象的constructor属性值(constructor的指向)会发生改变。
function Person(){
}
Person.prototype={
name:"nike",
age:32,
job:"write",
sayName:function(){
console.log(this.name);
}
}; var person5=new Person(); console.log(person5.constructor==Person);
console.log(person5.constructor==Object);
这里重写了Person.prototype原型对象,重写之后变成一个Object对象实例,当然里面的属性和方法即是Person.prototype的属性方法。
里面没有显示的设置constructor属性,我们看一下constructor属性如何得来。
现在,Person.prototype已经是一个Object实例对象了,而Object构造函数在创建之初会自动生成它的prototype原型对象,同时原型对象会自动获取一个constructor属性(指向构造函数Object)。所有的Object实例对象通过_proto_都会获得原型对象里的constructor属性。
事情很明白了,当在读取person5.constructor属性时,按照原型链查找,最终在Object.prototype上找到constructor属性,它是指向Object构造函数的。
所以我们最后看到的结果也应该是这样的
console.log(person5.constructor==Person);//fasle
console.log(person5.constructor==Object);//true
如果不想因为重写prototype而改变了constructor的指向,那么就在重写的时候显式设置constructor属性的值。
Person.prototype={
constructor:Person,
name:"nike",
age:32,
job:"write",
sayName:function(){
console.log(this.name);
}
};
2.重写原型对象后,对实例对象通过_roto_访问原型对象的属性方法有影响。
我们知道构造函数的prototype属性是用来指向原型对象的,现在重写Person.prototype属性意味着它指向了一个新的对象(称为新的原型对象),不再指向函数创建时生成的那个原型对象了。(感觉绕的话,看一下js的内存分配)
在调用new Person()创建对象实例时,会有一个内部属性_proto_指向原型对象Person.prototype
1)如果new Person()创建实例发生在重写Person.prototype之前,那么_proto_指向的是函数创建时生成的原型对象。
2)如果new person()创建实例在重写Person.prototype之后,_proto_始终都是指向原型对象的,不过此时指向的是改写后的新原型对象。
情况1:
function Person(){
}
var person5=new Person(); Person.prototype={
constructor:Person,
name:"nike",
age:32,
job:"write",
sayName:function(){
console.log(this.name);
}
};
person5.sayName();//TypeError: person5.sayName is not a function
输出结果:TypeError: person5.sayName is not a function
情况2:
function Person(){
} Person.prototype={
constructor:Person,
name:"nike",
age:32,
job:"write",
sayName:function(){
console.log(this.name);
}
};
var person5=new Person(); person5.sayName();
输出结果:nike
在实际应用中用的是情况2.
重写prototype原型后哪些东西改变了的更多相关文章
- JS原型,Prototype,原型
对于javascript这样一种前端语言,个人觉得,要真正的理解其oop, 就必须要彻底搞清楚javascript的对象,原型链,作用域,闭包,以及this所引用的对象等概念.这些对弄明白了,应该就可 ...
- 你不知道的JavaScript--Item15 prototype原型和原型链详解
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
- JavaScript prototype原型和原型链详解
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
- JScript中的prototype(原型)属性研究
今天看到同事使用js中的Prototype,感觉很是新鲜.由此想深入学习一下prototype(英['prəʊtətaɪp] 美['protə'taɪp]n. 原型:标准,模范),在学习prototy ...
- javascript prototype原型链的原理
javascript prototype原型链的原理 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: <script type="text/javasc ...
- js prototype 原型
//https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E7%9A%84%E4% ...
- Java设计模式:Prototype(原型)模式
概念定义 使用原型实例指定待创建对象的种类,并通过拷贝该原型来创建新的对象.Prototype模式允许一个原型对象克隆(复制)出多个与其相同的对象,而无需知道任何如何创建的细节. 应用场景 对象的创建 ...
- 7、Prototype 原型模式 通过复制创造实例 创造型模式
2020-07-19 发哥讲 发哥讲 其实上一节的末尾讲到如何去生成对象,其中有一个关于clone的,这其实就是Prototype原型模式. 通过克隆(拷贝)的方式生成对象 1.了解Prototype ...
- 设计模式(1)--Prototype(原型模式)--创建型
1.模式定义: 原型模式就是用原型实例指定创建对象的种类,并且通过复制这些原型创建新的对象. 2.使用场景: 在原型模式中我们可以利用过一个原型对象来指明我们所要创建对象的类型,然后通过复制这个对象的 ...
随机推荐
- 国庆 day 3 上午
a[问题描述] 你是能看到第一题的 friends 呢. ——hja 怎么快速记单词呢?也许把单词分类再记单词是个不错的选择.何大爷给 出了一种分单词的方法,何大爷认为两个单词是同一类的当这两个单词的 ...
- leetcode笔记:Merge Sorted Array
一.题目描写叙述 二.解题技巧 这道题不存在复杂的分析过程和边界条件.假设单纯得考虑从小到大地将两个数组进行合并的话.每次在num1中插入一个数的话,须要将后面的元素都向后移动一位.这样.整个处理过程 ...
- EJB3.0高速入门项目开发步骤
EJB3.0开发步骤 1. 开发环境 IDE开发工具:Eclipse Java EE IDE for Web Developers EJB容器:jboss-4.2.3.GA 后台数据库:MysQL ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第10章节--SP2013中OAuth概览 创建和管理应用程序身份
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第10章节--SP2013中OAuth概览 创建和管理应用程序身份 在之前的部分.你看到应用程序怎样像用 ...
- tp5使用oss存储图片
1.申请Access Key ID和Access Key Secret,以及创建好你的Bucket 2.通过composer安装oss插件 通过cmd,到项目的目录下,输入下面的指令. compose ...
- centos7 安装swftools Apache_OpenOffice
centos7 yum -y install wget wget http://www.swftools.org/swftools-0.9.2.tar.gz tar -xf swftools-.tar ...
- uwsgi和wsgi
一个Web应用的本质就是: 浏览器发送一个HTTP请求: 服务器收到请求,生成一个HTML文档: 服务器把HTML文档作为HTTP响应的Body发送给浏览器: 浏览器收到HTTP响应,从HTTP Bo ...
- [Atcoder Grand 006 C] Rabbit Exercise 解题报告 (期望)
题目链接:https://www.luogu.org/problemnew/show/AT2164 https://agc006.contest.atcoder.jp/tasks/agc006_c 题 ...
- Windows安装PHP MongoDB扩展
本文将讲述一下在Wamp环境下安装MongoDB扩展的过程,大家可以略作参考 Linux 版本的可以参考之前发布的Linux安装PHP MongoDB扩展 安装环境 系统环境:Windows 7 64 ...
- 知方可补不足~powerDesign为模型添加注释(让生成的SQL有注释)
事实上powerDesign本身就有这个功能,不需要我们修改它的生成器了,这种方法够简单! 一 打开表模型,选择column标签