原型和原型链

在对象自身身上找不到指定属性时,就会到这个对象的原型__proto__上找,原型也是指向一个对象,在这个对象上还找不到对应属性,则继续到原型上来找...以上过程形成原型链。

访问对象的原型:obj.__proto__ 或者可以调用Object.getPrototypeOf(obj),返回的值也是obj.__proto__;

obj.__proto__ 的值,在对象构造的时候,默认等于 obj.constructor.prototype ,可以理解为默认情况下:obj.__proto__ = obj.constructor.prototype = xx。

所以在对象被构造出来后,再去修改obj.constructor.prototype是无效的,对于已经生成的对象,修改其原型,只能通过修改obj.__proto__来实现。

空对象{} 的构造函数为 Object

直接在空对象的原型上添加或修改属性,会作用到js的所有对象中,因为所有的js对象的原型链终点都是Object.prototype所指向的对象:

Object.getPrototypeOf({}).x=13;
console.log([].x) //

对象属性

以下方式添加的属性都是添加到对象身上。

var obj;
obj = {
x:123,
method(){
return 123
}
};
obj.y = 99; // function Person(){
// this.a = 123;
// }
//
// obj = new Person();
console.log(obj)

包括Object.assign(target,src1,src2),仅仅把src对象身上的属性添加到target身上而已。可以使用assign来实现对象浅拷贝。

对象的遍历:http://es6.ruanyifeng.com/#docs/object#属性的可枚举性和遍历

获取不存在的属性,会从原型上获取,但是创建和原型上名字相同的属性时,对象身上以及原型上会同时存在同名的属性,两者不会冲突,取值的时候会优先从对象身上获取

var a = {
name:"ben"
}; var b = {};
b.__proto__ = a;
console.log(b.name); // ben b.name = 'kity';
console.log(b.name); // kity
console.log(a.name); // ben

对于 ES6 的class ,方法直接定义在原型上

class Point {
toString() {
// ...
}
}
// 等同于
Point.prototype = {
toString() {},
}; typeof Point // "function"

克隆

首先复制原型,后复制对象身上的属性。

function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}

ps:

Object.create(target)   的作用实际上以target为原型(__proto__),创建并返回一个空对象。

继承

  ES5中需要手动修改原型链来实现继承

  ES6中使用extend语法实现继承,本质是首先生成一个父类的对象(在子类的构造函数中必须显式或隐式调用了父类的构造函数),然后以这个父类的对象为原型(__proto__),创建子类对象。

  B继承A,创建B对象,创建的过程是这样的:创建A对象Aobj,Aobj是一个空的对象,接着A的原型Apro,Apro也是空的对象,然后将class A中的方法定义到Apro对象上,接着让Aobj.__proto__ = Apro。这是创建单个class实例的过程。接着创建Bobj,是一个空的对象,然后让Bobj.__proto__ = Aobj,接着让class B上的方法,添加到Aobj对象上。

  通过class new出来的对象的constructor指向class,在ES5也是类似,通过函数new出来的对象的constructor指向函数

Object.freeze 和 const

const代表属性的值不能发生变化,如果值是对象,则对象可变,但被修饰为const的对象引用不能发生变化

freeze:浅冻结,被冻结的对象,不能添加、删除、修改属性,但如果属性是对象,则对象可变,在严格模式下,违反freeze的规则会抛出异常,普通模式下则不会有任何变化(静默模式)

js 对象细节的更多相关文章

  1. 深入理解JS 执行细节

    javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等 ...

  2. DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为(转)

    一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢 ...

  3. 深入理解JS执行细节(写的很精辟)

    来源于:http://www.cnblogs.com/onepixel/p/5090799.html javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之 ...

  4. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  5. Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令

    1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  6. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  7. JS 对象封装的常用方式

    JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...

  8. JSON字符串和JS对象之间的转换

    JSON字符串和JS对象之间的转换 1 json字符串转换为js对象 1.1 标准json格式字符串转换为Js对象  JSON字符串 str JSON.parse(str) eval(str) eva ...

  9. js 对象的_proto_

    js 对象呢,有个属性叫_proto_,以前没听说过,也没关注,最近看这个原型,就被迫知道了这个东西,js 这里面的东西,真是规定的很奇怪,具体为啥也不知道,就测试发现的,对象的_proto_属性,和 ...

随机推荐

  1. bzoj 2626: JZPFAR【KD-tree】

    和3053差不多,把pair first做成负数就可以用大根堆维护了 注意:要开long long:比较的时候因为编号也占权重所以要比较pair:编号不是mid!不是mid!是初始输入的那个编号!搞混 ...

  2. bzoj 4240: 有趣的家庭菜园【树状数组+贪心】

    以为是逆序对数-- 实际上,原数组移动若干次后我们会得到一个新的下标序列,需要的移动次数是这个新下标序列的逆序对数 然后我们要让这个最小,考虑贪心先按h把下标排一遍序,然后每次询问到一种值的时候,对每 ...

  3. USACO Training3.1联系【排序终极题目】By cellur925

    题目传送门 这题我们很容易想到直接枚举即可.算法本身并没有什么难度但是细节超多!于是这题整整卡了一天....... (不,还是我太弱了.) 期间还暴露出一些平时没有特别注意的问题,这次一起解决. 开始 ...

  4. Selenium | 基础入门

    在maven项目搭建环境: <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifact ...

  5. [洛谷4329/COCI2006-2007#1] Bond

    Description Everyone knows of the secret agent double-oh-seven, the popular Bond (James Bond). A les ...

  6. HDOJ 5475 An easy problem

    题目传送门 题意:一个计算器,两种操作,乘上x,或者除掉之前的某个x,结果取模输出 分析:因为取模不支持除法,然后比赛时想到用逆元,结果发现MOD需要与b互质,结果一直苦苦寻找求逆元的其它方法.后来队 ...

  7. Apache Kylin的框架介绍

    不多说,直接上干货! Apache kylin 能提供低延迟(sub-second latency)的秘诀就是预计算,即针对一个星型拓扑结构的数据立方体,预计算多个维度组合的度量,然后将结果保存在hb ...

  8. SSM-WebMVC(三)

    SSM-WebMVC(三) 一.Annotated Controllers ​ 应用程序控制器 handlerMethod(处理方法) ㈠方法入参 ​ (springmvc针对于在controller ...

  9. How to proxy a web site by apache2 in Ubuntu

    Install apache2 To execute the install command in terminal: sudo apt-get install apache2 Then, we ca ...

  10. QTableWidget表头样式

    转载请注明出处:http://www.cnblogs.com/dachen408/p/7742680.html QTableView { background-color: rgba(255, 255 ...