面向对象的语言有一个标志,那就是语言中都有类的概念

前面的文章中我提到过ECMAScript中没有类的概念(ES6之前)

所以JS中的对象和其他语言中的对象存在着一些区别

ECMA中对对象的定义如下:

无序属性的集合,其属性可以包含基本值、对象、或者函数

说白了JS中的对象可以看作散列表,无非就是一组名、值对

前面我在介绍JS中的引用类型的时候,已经介绍了对象定义的两种方式:1、字面量 2、构造函数

这里不再赘述

下面介绍一下对象上的一些属性

属性类型

ECMA中规定了两种属性类型:数据属性和访问器属性,对象上的每个属性都是其中的一种

这些属性的特性不能直接访问,只能使用ES5提供的Object.getOwnPropertyDescription(访问的对象,访问的属性名)    第二个参数为字符串

该方法返回一个对象,返回指定对象指定属性的属性描述符

1、数据属性

对于这一类型的属性有四种描述其行为的特性

  • configurable 能否通过delete删除该属性,或能否将其修改为访问器属性,默认为 true
  • enumerable 能否通过 for-in 循环返回该属性 默认为 true
  • writable 能否修改属性的值 默认为true
  • value 保存该属性的值 默认为undefined

要修改上述特性只能通过ES5提供的另外一个函数 Object.defineProperty(定义的对象, 属性名, 特性描述符)

PS.要注意的是:一旦将configurable设为false就不能修改除了writable特性的其他特性了(包括configurable本身)

当对属性进行违反其特性的操作时,会静默地失败,严格模式会报错

2,、访问器属性

访问器属性没有value特性,value特性和访问器属性的特性只能存在一种

访问器属性有以下特性

  • configurable 能否通过delete删除该属性,或能否将其修改为访问器属性,默认为 true
  • enumerable 能否通过 for-in 循环返回该属性 默认为 true
  • get 定义该属性被访问时要执行的函数 默认undefined
  • set 定义该属性被执行修改操作时执行的函数 默认undefined

由于get、set特性让我们可以在数据进行操作时,执行函数,所以可以用其实现一些MVV*框架的双向数据绑定

var obj = {values:null}; // 定义value属性用于保存值
Object.defineProperty(obj, data , {
get: function(){
return this.values;
},
set: function(value){
this.values = value;
// 其他操作
}
})

其中get、set不一定要同时指定,只指定get表示该属性只读,只指定set表示该属性只能写不能读

PS.今天就先介绍对象的属性,要注意的是定义属性特性和读取属性特性都有复数方法:getOwenPropertyDescriptions、defineProperties

除此而外上述操作只能在支持ES5的浏览器中执行,这也是使用访问器属性实现的Vue只兼容到IE9的原因

Javascript高级编程学习笔记(19)—— 对象属性的更多相关文章

  1. Javascript高级编程学习笔记(29)—— BOM(3)location对象

    在JS中location是一个神奇的对象 它既是window对象的属性,也是document对象的属性 它的作用主要在于保存当前文档页面的信息,以及将 url 解析为独立的片段 location对象属 ...

  2. Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)

    WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...

  3. Javascript高级编程学习笔记(6)—— 流程控制语句

    话不多说,我们直接开始进入今天的主题 流程控制语句 首先什么是流程控制语句呢? 顾名思义,就是控制流程的语句. 在JS中语句定义了ECMAScript中的主要语法,让我们可以使用一系列的关键字来完成指 ...

  4. Javascript高级编程学习笔记(26)—— 函数表达式(4)私有变量

    私有变量 严格来讲,JS中没有私有成员的概念,所有对象属性都是公有的. 但是JS中有私有变量的概念 所有在函数中定义的变量都可以认为是私有变量,因为不能在函数外部进行访问 私有变量包括 1.函数参数 ...

  5. Javascript高级编程学习笔记(18)—— 引用类型(7)单体内置对象

    什么是内置对象呢? js高级程序设计中给出的定义为:由ES规定不依赖于宿主环境的对象,这些对象在JS执行前就已经存在 前面我们介绍的引用类型都是内置对象 除了这些对象外ECMA还规定了两个单体内置对象 ...

  6. Javascript高级编程学习笔记(59)—— 事件(3)事件对象

    事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...

  7. Javascript高级编程学习笔记(31)—— BOM(5)screen、history对象

    screen对象 screen对象应该是BOM对象中最不常用的对象了 其主要用于提供客户端的显示能力信息 包括浏览器外部显示的信息,和像素的宽高等 这个对象的主要用于检测客户端能力,一般不会影响功能 ...

  8. Javascript高级编程学习笔记(30)—— BOM(4)navigator对象

    window对象作为浏览器的全局对象.location对象保存了页面的url信息 那么navigator对象又有什么作用呢? navigator对象 该对象最早由 Netspace Navigator ...

  9. Javascript高级编程学习笔记(28)—— BOM(2)window对象2

    今天讲一下window对象和浏览器导航,弹窗等有关的内容 导航和打开窗口 window.open() 用于导航到某个特定 url 该方法接收四个参数 1.url 2.窗口目标(当页面中有多个框架fra ...

随机推荐

  1. node.js中对 mysql 进行增删改查等操作和async,await处理

    要对mysql进行操作,我们需要安装一个mysql的库. 一.安装mysql库 npm install mysql --save 二.对mysql进行简单查询操作 const mysql = requ ...

  2. hbase-多租户

    namespace 不同表在不同的namespace,可以做用户的权限控制 资源限制 限制每时间段请求的数量和大小 设置表的空间大小 修改hbase-site.xml文件 添加两个配置 hbase.q ...

  3. DNN原理探究系列之目录与序章篇

    序言: 神经网络结构,作为最成功的机器学习模型之一,其工作原理一直被埋藏得比较深,其解释性以至于被称为黑盒. 自己对于DNN的理解也只能算刚踏入了门槛,对于人脑的原理与DNN原理之间的互通性,一直是非 ...

  4. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  5. xml中CDATA包含问题

    最近对接徐州一家医院,his是东联的,其中有个接口要求传入格式类似于 : <![CDATA[ <Request> <CardNo>000002629518</Car ...

  6. py3.0第五天,常用模块

    本节大纲: 模块介绍 time &datetime模块 random os sys shutil json & picle shelve xml处理 yaml处理 configpars ...

  7. 关于Selenium.common.exceptions.WebDriverException: Message: Invalid locator strategy: css selector 的问题

    在执行脚本时报Selenium.common.exceptions.WebDriverException: Message: Invalid locator strategy: css selecto ...

  8. idea类里面编译报错,快速定位快捷键设置

    settings---->keyMap------->Main menu----------->在搜索框里输入error,找到Next Highlighted Error 和Prev ...

  9. dedecms mvc 开发

    目录结构说明: |_app    |___control      控制器(C)    |___model        模型(M)    |___templates    视图模板(V)    |_ ...

  10. Notes : <Hands-on ML with Sklearn & TF> Chapter 5

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...