原型和原型链

在对象自身身上找不到指定属性时,就会到这个对象的原型__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. P5168 xtq玩魔塔

    传送门 其实就是板子--只要会克鲁斯卡尔重构树和带修莫队就可以了 这么想着的我就调了将近一个下午-- 思路其实比较清晰,然而码量很大,细节贼多-- 不难看出只在最小生成树上走最优,于是建出克鲁斯卡尔重 ...

  2. Electron开发

    [Debug] 1)cmd进入项目所在根目录,输入: $ npm install --save-dev devtron$ npm install --save electron-debug 2)在主j ...

  3. Java关键字abstract与final总结

    关键字:abstract 用来修饰抽象类与抽象类中的方法 抽象类需要注意的几点: 抽象类不能被实例化.抽象类可以包含属性:方法:构造方法,但是构造方法不能用来new实例,只能被子类调用 有抽象方法的类 ...

  4. oracle常用的一些查询命令

    .查看所有用户 select * from dba_users; select * from all_users; select * from user_users; .查看用户或角色系统权限(直接赋 ...

  5. HTML5中div,article,section的区别

    最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...

  6. Shell 根据名称杀掉进程

    代码如下: #!/bin/sh # 从命令行读取进程名称 NAME=$ echo "---------------" echo 'killing ->' $NAME # 过滤 ...

  7. 喵哈哈村的魔法考试 Round #1 (Div.2) ABCD

    官方题解: http://www.cnblogs.com/qscqesze/p/6418555.html#3623453 喵哈哈村的魔法石 描述 传说喵哈哈村有三种神奇的魔法石:第一种魔法石叫做人铁石 ...

  8. cocos_js写文件

    var writablePath = jsb.fileUtils.getWritablePath(); writablePath += "cocos/data/"; var fil ...

  9. Asp.net 字符(一)

    1.字母大小写处理 private string GetChangedStr(string oldStr, strType type) { string newStr = ""; ...

  10. AJPFX总结匿名类及其使用

    匿名类是一种特殊的内部类,它是在一个表达式内部包含一个完整的类定义.内部类是在一个类的内部嵌套定义的类,它可以是其它类的成员也可以在一个语句块的内部定义还可以在表达式内部匿名定义匿名类与其他类的不同就 ...