原型和原型链

在对象自身身上找不到指定属性时,就会到这个对象的原型__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. git 命令参考手册

    你的本地仓库由 git 维护的三棵“树”组成.第一个是你的 工作目录,它持有实际文件:第二个是 缓存区(Index),它像个缓存区域,临时保存你的改动:最后是 HEAD,指向你最近一次提交后的结果. ...

  2. Oracle之Char VarChar VarChar2

    Oracle之Char VarChar VarChar2 在Oracle数据库中,字符类型有Char.VarChar和VarChar2三种类型,但不大清楚各自区别在哪儿,平时基本上就是用VarChar ...

  3. 跟我一起玩Win32开发(18):使用对话框的两个技巧

    相信大家知道对话框怎么用了,就是先用“资源编辑器”设计一个对话框,然后在代码中加载处理.今天,我向大家分享两个使用对话框的技巧,还是比较实用的.不用担心,先喝杯茶,很简单的,一点也不复杂,总之,看俺写 ...

  4. C3 Transitions, Transforms 以及 Animation总结

    C3 Transitions, Transforms 以及 Animation总结 前言 昨天有人咨询我面试的注意事项, 突然就意识到自己这块非常差, 竟然没有任何的印象, 准备看着大神老师的博客, ...

  5. linux下实现多台服务器同步文件(inotify-tools+rsync实时同步文件安装和配置)

    inotify-tools+rsync实时同步文件安装和配置 注:转载https://www.linuxidc.com/Linux/2012-06/63624.htm

  6. 制作ubuntu启动U盘:Windows,Mac osx ,Ubuntu

    1.How to create a bootable USB stick on Windows https://www.ubuntu.com/download/desktop/create-a-usb ...

  7. JSP与Servlet的编解码

    一.java web中涉及编解码的地方 (1)浏览器端向后台发起请求时:URL.Cookie.Parameter: (2)后台响应返回数据时:页面编码,数据库数据编码:

  8. 为localhost添加https

    1.按照https://stackoverflow.com/a/7184031/4619958来做 其中,CommonName填写localhost 2.在ssl.conf里头加上 <Direc ...

  9. C#基础学习5

    数组集合

  10. 10.JAVA-接口、工厂模式、代理模式、详解

    1.接口定义 接口属于一个特殊的类,这个类里面只能有抽象方法和全局常量  (该概念在JDK1.8之后被打破,在1.8后接口中还可以定义普通方法和静态方法,在后续章节会详讲) 1.1 接口具有以下几个原 ...