Object实在是JavaScript中很基础的东西了,在工作中,它只有那么贫瘠的几个用法,让人感觉不过尔尔,但是我们真的了解它吗?

  1. 当我们习惯用

var a = {
name: 'tarol',
age: 18
};
console.log(a.age); //
a.age = 19;
console.log(a.age); //

  初始化和访问对象的时候,谁会在意这种方式也是合法的:

var a = {
name: 'tarol',
_age: 18,
set age(value) {
this._age = value;
},
get age() {
return this._age;
}
};
console.log(a.age); //
a.age = 19;
console.log(a.age); // 

  2. 当我们习惯用

function A() {
this.name = 'tarol';
} var a = new A(); function B() {
this.age = 18;
} B.prototype = a; var b = new B(); console.log(b.name); //tarol

  实现继承的时候,谁会在意其实也可以这样:

var a = {
name: 'tarol'
};
var b = Object.create(a);
b.age = 18; console.log(b.name); //tarol

  3. 当我们知道原型链以后,想恶作剧修改内置函数的原型,却发现没有办法

var a = {};

Object.prototype = a;

console.log(Object.prototype === a);  //false

  如果你感兴趣,那么我从头说起:

  首先,JavaScript中的对象是什么?ES5中只给出一句话,对象是属性的集合。它只是一个盒子,它能做什么,取决于盒子里有什么。

  那么,属性是什么,一般看来,属性是一个key, value对,这个说法是对的吗?我们来剖析下属性。

  从一个程序员的角度来说,属性分为可通过JS调用的的和不可通过JS调用的。不可调用的叫做内部属性,那么可调用的我们对应着叫外部属性吧。内部属性是JS解释器实现各种接口的时候使用的算法中需要调用的属性,举个栗子,有个内部属性叫[[Put]],这是一个内部方法,传入属性名和值,它的作用就是为属性赋值。所以当我们使用a.age = 18的时候,实际就调用到了这个内部属性。而外部属性又分为两种,一种是数据属性,一种是访问器属性。上面的例一中,第二种方式给对象a添加了三个属性,其中name、_age是数据属性,age是访问器属性。当属性是数据属性的时候,属性是key、value对的说法好像是对的,但当属性是访问器属性的时候,这个说法好像有问题了,因为一个key对应的是一个setter和一个getter。所以,这个说法是错的?

  其实,属性不是我们看到的那样,单单就一个key对应一个数据或者一个setter加一个getter。属性还存在其他一些状态,我们称之为特性,无论是数据属性还是访问器属性,都存在四个特性。数据属性的特性为:[[Value]]、[[Writable]]、[[Enumerable]]、[[Configuration]],访问器属性的特性为:[[Get]]、[[Set]]、[[Enumerable]]、[[Configuration]]。其中[[Value]]、[[Get]]、[[Set]]相信已经很好理解了,[[Writable]]描述数据属性是否可被重新赋值,[[Enumerable]]描述属性是否可被for-in遍历,[[Configuration]]描述属性特性是否可被修改(一旦设置为false则不可以再修改此特性)。

  JS开放了三个接口用于设置和获取属性的特性,分别是Object.defineProperty、Object.defineProperties和Object.getOwnPropertyDescriptor。

var a = {
name : 'tarol',
age : 18,
job : 'coder'
};
Object.defineProperty(a, 'name', {
value: 'ctarol',
writable: true,
enumerable: true,
configuration: true
});
Object.defineProperties(a, {
age: {
value: 19,
writable: true,
enumerable: true,
configuration: true
},
job: {
value: 'mental',
writable: true,
enumerable: true,
configuration: true
}
});
console.log(a.name); //tarol
console.log(a.age); //
console.log(Object.getOwnPropertyDescriptor(a, 'job')); //Object {value: "mental", writable: true, enumerable: true, configurable: true} 

  总的看来,属性还是可以作为一个key, value对的,但这个value不是我们赋的值,而是整个属性特性的集合,我们称之为属性描述。

  外部属性的问题解决了,内部属性我们还只是蜻蜓点水般浅尝辄止,所以接下来我们开始从内部属性入手,对JS中的对象做一个更深刻的认识。以下是内部属性的表格:

属性名 用途 属性类型

方法返回值

(仅适用方法)

他处引用

(仅适用数据)

他处赋值

(仅适用数据)

他处调用

(仅适用方法)

调用其他

(仅适用方法)

[[Prototype]] 对象原型 Object  

__proto__

etc.

     
[[Class]] 对象类型 String   Object.prototype.toString()      
[[Extensible]] 可否添加属性 Boolean    

Object.seal(obj) --> false

Object.freeze(obj) --> false

Object.preventExtensions(obj) --> false

   
[[GetOwnProperty]] 返回自身指定的属性描述 func('prop') 属性描述    

Object.getOwnPropertyDescriptor(obj, 'prop')

[[GetProperty]]

 
[[GetProperty]] 返回原型链上指定的属性描述 func('prop') 属性描述       [[GetOwnProperty]]
[[HasProperty]] 返回原型链上是否有指定属性 func('prop') Boolean       [[GetProperty]]
[[DefineOwnProperty]] 创建或修改自身的属性描述 func('prop', desc, Boolean) Boolean    

Object.defineProperty(obj, 'prop', desc)

Object.defineProperties(obj,  descs)

 
[[DefaultValue]] 将对象转换为对应的基础类型 func(String/Number) String / Number      

toString()

valueOf()

[[Delete]] 删除对象的属性 func('prop', Boolean) Boolean       [[GetOwnProperty]]
[[CanPut]] 可否设置属性的值 func('prop') Boolean       

[[GetOwnProperty]]

[[GetProperty]]

[[Extensible]]

[[Get]] 获取属性的值 func('prop') mixin       [[GetProperty]]
[[Put]] 设置属性的值 func('prop', mixin, Boolean) Boolean      

[[CanPut]]

[[GetOwnProperty]]

[[GetProperty]]

[[DefineOwnProperty]]

  上面的表格稍显晦涩,看不懂不要紧,我们来分下类。内部属性中除了[[Class]]、[[DefaultValue]]用于展示信息以外,其他都是用来操作外部属性的,可见对象的核心就是属性。其中我列出[[CanPut]]和[[Put]]的算法实现,因为这两个方法的实现涵盖了基本所有的属性操作和思想。

  [[CanPut]]:

  [[Put]]:

  前面提到过,我们使用a.age=18进行赋值的时候,调用的就是[[Put]]这个内部方法。由上图算法可知,当对属性赋值时,只要这个属性不是原型链上的访问器属性,那么就会修改或产生自身的数据属性,即不存在一种情况,就是修改原型链上的数据属性。我们测试下:

var a = {
name: 'tarol',
_age: 18,
set age(value) {
this._age = value;
},
get age() {
return this._age;
}
};
var b = Object.create(a);
console.log(b.hasOwnProperty('name')); //false
console.log(b.hasOwnProperty('_age')); //false
console.log(b.hasOwnProperty('age')); //false
b.name = 'okal';
b.age = 19;
console.log(b.hasOwnProperty('name')); //true
console.log(b.hasOwnProperty('_age')); //true
console.log(b.hasOwnProperty('age')); //false
console.log(a.name); //tarol
console.log(a.age); //

  由结果可知,我们在对name这个原型链上的数据属性进行赋值时,实际上是重新创建了一个自身属性,对原型上的数据属性是没有影响的。而调用访问器属性age的[[Set]]方法的时候,传入的this也是当前的对象而不是访问器属性的拥有者,所以在当前对象上创建了一个自身属性_age。

  好了,上面说的是通用的内部属性,即Object类型的内部属性,而像Boolean、Date、Number、String、Function等拥有更多的内部属性,就留到下一篇再说。

JavaScript中你所不知道的Object(一)的更多相关文章

  1. JavaScript中你所不知道的Object(二)--Function篇

    上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...

  2. Visual Studio中你所不知道的智能感知

    在Visual Studio中的智能感知,相信大家都用过.summary,param,returns这几个相信很多人都用过的吧.那么field,value等等这些呢. 首先在Visual Studio ...

  3. KVO中你所不知道的"坑"

      一.什么是 KVO 首先让我们了解一下什么KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用于检测对象的某些属性的实时变化情况并作出响应.键值观察Key-Value ...

  4. Go基础之--位操作中你所不知道的用法

    之前一直忽略的就是所有语言中关于位操作,觉得用处并不多,可能用到也非常简单的用法,但是其实一直忽略的是它们的用处还是非常大的,下面先回顾一下位操作符的基础 位操作符 与操作:&1 & ...

  5. 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄

    做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...

  6. js值----你所不知道的JavaScript系列(6)

    1.数组 在 JavaScript 中,数组可以容纳任何类型的值,可以是字符串.数字.对象(object),甚至是其他数组(多维数组就是通过这种方式来实现的) .----<你所不知道的JavaS ...

  7. js类型----你所不知道的JavaScript系列(5)

    ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型等. 1.内置类型 JavaScript 有七种内置类型: • 空值(null) • 未定义( ...

  8. 闭包----你所不知道的JavaScript系列(4)

    一.闭包是什么? · 闭包就是可以使得函数外部的对象能够获取函数内部的信息. · 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. · 闭包就 ...

  9. Android中Context详解 ---- 你所不知道的Context

    转自:http://blog.csdn.net/qinjuning/article/details/7310620Android中Context详解 ---- 你所不知道的Context 大家好,  ...

随机推荐

  1. ORA-01031:insufficient privileges解决方法

    今天刚创建的数据库,用sys身份登录的时候提示 ORA-01031:insufficient privileges !郁闷了,肯定是先百度一波···然后设置当前用户权限.用Administator用户 ...

  2. RabbitMQ入门-Topic模式

    上篇<RabbitMQ入门-Routing直连模式>我们介绍了可以定向发送消息,并可以根据自定义规则派发消息.看起来,这个Routing模式已经算灵活的了,但是,这还不够,我们还有更加多样 ...

  3. ACM退役帖 -- 未真正开始也不会结束

    2017.5.21,20岁的最后一天,昨天,随着2017年安徽省大学生程序设计竞赛落下帷幕,我也正式退役了ACM了.连ACM区域赛也没去过的我,也许是不够格提出退役ACM这句话的,但对ACM的热爱,虽 ...

  4. CentOS6 安装Sendmail + Dovecot + Squirrelmail

    本文记录在本地虚拟机CentOS6上搭建Sendmail + Dovecot + Squirrelmail 的Webmail环境的过程,仅仅是本地局域网的环境测试,不配置DNS, 也没有安全认证,Sq ...

  5. MySQL写压力性能监控与调优

    写压力调优:数据库的写.写压力性能监控.写压力调优参数 一.关于DB的写 1.数据库是一个写频繁的系统 2.后台写.写缓存 3.commit需要写入 4.写缓存失效或者写满-->写压力陡增--& ...

  6. Vue页面Demo

    为了学习了解Vue.js,试着写了一个demo,如下; 准备工作: 需要引入的js和css库有: 1.vue.js 主要是学习,所以引入了这个js库,实际运行时应该使用vue.min.js 2.axi ...

  7. Nexus3 配置3

    Nexus3 配置3 案例通过 NPM 的包管理 proxy : 表示设置公网仓库 hosted : 设置私网仓库 group : 将多个仓库合并在一起 设置 proxy 这里我用的 https:// ...

  8. V8 内存控制

    V8主要将内存分为:新生代 和 老生代. 1.新生代 新生代中的对象为存活时间短的对象. 它将堆内存一分为二,每一部分空间称为 semispace,其中一个处于使用状态(from 空间),另一个处于闲 ...

  9. Java Swing项目专栏之项目业务流程与业务逻辑

    Java Swing项目专栏 项目前言 这个超市管理项目是从八月初开始的,原以为像我这样的小菜比是完全掌控不了这样的项目的.原因是因为大一大二还是没怎么好好学自己的专业课,这次项目做完,我给自己建立了 ...

  10. 【Linux】修改Linux字符集

    一.查看字符集 常见的几种方法: (1) [root@devhxyw03 ~]# echo $LANG zh_CN.GBK (2) [root@devhxyw03 ~]# env | grep LAN ...