[JS] Topic - Object.create vs new
故事背景
Ref: 你不知道的javascript之Object.create 和new区别
var Base = function () {}
(1) var o1 = new Base();
(2) var o2 = Object.create(Base); // <----推荐
- (1) 使用的是__proto__
// var o1 = new Object();
o1.__proto__ = Base.prototype;
Base.call(o1);
- (2) 使用的是prototype
Object.create = function (o) {
var F = function () {};
F.prototype = o;
return new F();
};
Object.create 失去了原来对象的属性的访问。
添加 Base.prototype.a = 3 后,依旧如此。
如此一来,得到的效果就是:
"通过Object.create构造的话,是连Base原型上的属性都访问不到的。"
因为他压根就没有指向他的prototype!
__proto__
和 prototype 的区别
Ref: js中__proto__和prototype的区别和关系?

* 显式原型 explicit prototype property:
* 隐式原型 implicit prototype link:
* 二者的关系:
隐式原型指向创建这个对象的函数(constructor)的prototype
1. 对象字面量的方式
这个对象是通过对象字面量构造出来的。
var person1 = {
name: 'cyl',
sex: 'male'
};
形如这个形式的叫做对象字面量。构造出的对象,其[[prototype]]指向Object.prototype。
2. new 的方式
这个对象是由构造函数构造出来的。
function Person(){}
var person1 = new Person();
通过new操作符调用的函数就是构造函数。由构造函数构造的对象,其[[prototype]]指向其构造函数的prototype属性指向的对象。
每个函数都有一个prototype属性,其所指向的对象带有constructor属性,这一属性指向函数自身。(在本例中,person1的[[prototype]]指向Person.prototype)
3. ES5中的Object.create()
这个对象是由函数Object.create构造的。
var person1 = {
name: 'cyl',
sex: 'male'
}; var person2 = Object.create(person1);
解析:
function object(o){
function F(){}
F.prototype = o;
return new F()
}
如下可见:person2.__proto__ === person1 ==== person1.prototype
//以下是用于验证的伪代码
var f = new F();
//于是有
f.__proto__ === F.prototype //true
//又因为
F.prototype === o;//true
//所以
f.__proto__ === o;
正视历史
Why we need Prototype 模式?
Ref: Javascript继承机制的设计思想
Brendan Eich想到C++和Java使用new命令时,都会调用"类"的 构造函数(constructor)。
他就做了一个简化的设计,在Javascript语言中,new命令后面跟的不是类,而是构造函数。
起因:prototype属性的引入 - 为了解决属性共享问题
为构造函数设置一个prototype属性,包含一个对象(以下简称"prototype对象"),所有实例对象需要共享的属性和方法,都放在这个对象里面;
那些不需要共享的属性和方法,就放在构造函数里面。
构造函数de验证方法:
alert(cat1.constructor == Cat); //true
alert(cat2.constructor == Cat); //true
alert(cat1 instanceof Cat); //true
alert(cat2 instanceof Cat); //true
Prototype模式de验证方法:
alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true
// 某一个属性到底是本地属性(非共享),还是继承自prototype
对象的属性(共享)
alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false // 无所谓本地属性or共享属性
alert("name" in cat1); // true
alert("type" in cat1); // true
Why we need __proto__ 模式?
Ref: js中__proto__和prototype的区别和关系?
对象具有属性__proto__,可称为隐式原型;
一个对象的隐式原型指向:构造该对象的构造函数的原型【向上的指针】,这也保证了实例能够访问在构造函数原型中定义的属性和方法。
方法这个特殊的对象,除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性——原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象)。
原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。
(完)
[JS] Topic - Object.create vs new的更多相关文章
- js创建对象 object.create()用法
Object.create()方法是ECMAScript 5中新增的方法,这个方法用于创建一个新对象.被创建的对象继承另一个对象的原型,在创建新对象时可以指定一些属性. 语法: Object.crea ...
- [JS] Topic - why "strict mode" here
Ref: Javascript 严格模式详解 使得Javascript在更严格的条件下运行: - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全 ...
- 【前端】js中new和Object.create()的区别
js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...
- js Object.create 初探
1.作用 Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__. https://developer.mozilla.org/zh-CN/docs/W ...
- js中的new操作符与Object.create()的作用与区别
js中的new操作符与Object.create()的作用与区别 https://blog.csdn.net/mht1829/article/details/76785231 2017年08月06日 ...
- js继承之Object.create()
通过 Object.create() 方法,使用一个指定的原型对象和一个额外的属性对象创建一个新对象.这是一个用于对象创建.继承和重用的强大的新接口.说直白点,就是一个新的对象可以继承一个对象的属性, ...
- js学习日记-new Object和Object.create到底干了啥
function Car () { this.color = "red"; } Car.prototype.sayHi=function(){ console.log('你好') ...
- JS - Object.create(prototype)方法
用Object.create(prototype)方法创建一个对象,这个对象的原型将指向这个传入的prototype参数
- 使用 Object.create实现js 继承
二.Object.create实现继承 本文将来学习第七种继承方式Object.create()方法来实现继承,关于此方法的详细描述,请戳这里.下面来通过几个实例来学习该方法的使用: var Pare ...
随机推荐
- 第二章 flex处理二义性
大多数flex程序有二义性,相同的输入可能被多种模式匹配 flex通过下面2个规则来解决 匹配尽可能长的字符 如果2个模式都可以匹配, 匹配更早出现的那个模式 例子 "+" { r ...
- MySql数据库事务正常提交,回滚失败
问题:在初次练习Mysql数据库事务时,事务正常提交,但是在遇到异常应当回滚时,回滚失败. 代码如下: //2.更新操作. public void update(Connection conn, St ...
- Hive总结(八)Hive数据导出三种方式
今天我们再谈谈Hive中的三种不同的数据导出方式. 依据导出的地方不一样,将这些方式分为三种: (1).导出到本地文件系统. (2).导出到HDFS中: (3).导出到Hive的还有一个表中. 为了避 ...
- 启明星系统安装教程(如何在windows2012里配置IIS)
(1)安装IIS 因为在windows2012里,安装数据库,IIS部分组件都需要.NET3.5,而默认windows2012安装时,并不会把此组件复制到电脑里 导致,后期要安装.NET3.5还需要安 ...
- shell命令行执行python(解析json)
每个脚本都有自己的擅长. 有次实现一个work,使用了shell,php,python看着文件种类多,不方便交接,看着也比较麻烦. 减少文件种类数,也是很有必要的. 遇到的场景:shell程序需要从j ...
- Java多线程学习(吐血超详细总结)(转)
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 写在前面的话:此文只能说是java多线程的一个入门,其实Java里头线程完全可以写一本书了,但 ...
- 用户人品预测大赛--TNT_000队--竞赛分享
用户人品预测大赛--TNT_000队--竞赛分享 DataCastle运营 发表于 2016-3-24 14:29:57 887 0 0 答辩PPT 0 回复 用户反馈 隐私 ...
- 了解 JavaScript (2)- 需要了解的一些概念
Ajax 是什么 Ajax 是一种创建交互式 Web 应用程序的方式. Ajax 是 Asynchronous JavaScript and XML 缩写(异步的 JavaScript 和 XML), ...
- 手动释放和收缩tempdb
USE [tempdb] GO DBCC FREEPROCCACHE DBCC DROPCLEANBUFFERS DBCC FREESYSTEMCACHE ('ALL') DBCC FREESESSI ...
- linux 磁盘空间满了,排查记录
先贴命令:du -m --max-depth=1或du -h --max-depth=1du:用于统计linux中文件或目录所占磁盘空间的大小du参数######-m:以M为单位展示查询结果-h:以K ...