一、介绍

老铁们,这次是JS的面向对象的编程OOP(虽然我没有对象,心累啊,但是可以自己创建啊,哈哈)。

JS高程里第六章的内容,这章内容在我看来是JS中很难理解的一部分。所以分成三篇博客来逐个理清。

这是第一篇:理解对象,认识对象属性的类型。

二、理解对象

书中原话--ECMA-262中把对像定义为:无序属性的集合。其中属性可以是基本值,对象或者是函数。

1.我们通俗点理解一下

对象是一个真实存在的东西,就像世上每一个人、每一个物体一样,它有自己的属性,行为。也就是说各种属性集合在一起就是一个具体的对象。(你自己也是一个对象)

举一些生活例子:

小明:有名字,年龄(基本值),说话(方法) 等属性

电脑:有颜色,大小(基本值),cpu(对象)等属性

2.我们js代码理解一下:

1.用new Object()构造函数方法来创建对象

//obj是我创建的一个对象,它有name、age属性,sayHi方法
var obj = new Object();
obj.name = "ry";
obj.age="3";
obj.sayHi = function(){
console.log("Hi");
}

2.用对象字面量创建对象

//创建一个person对象
var person = {
name : "ry",
age : 3,
sayBye: function(){
console.log('bye bye');
}
};

上面说这么多,就想说明白js中的对象是什么。总之:无序的属性的集合 == 对象

三、理解对象属性的类型

1.对象属性有类型?奇怪吗?

一开始我们对未知的事物都会充满的疑惑和惊讶,但是知识这东西,我们更多的选择去接受它,然后理解它,最后运用它。

  • 可能你会问对象属性还有类型?一开始我也觉得惊讶。
  • 没错,对象属性是有类型的,可能你不能理解,但只能接受。

2.对象属性类型有哪些:数据属性和访问器属性

对于对象属性类型这块,我们只是简单的去了解有什么类型,类型区别。 这也有助于我们去了解对象。

1.数据属性(最常用的)

既然有不同的类型,那肯定要有一个东西去区分他们,那这个东西就是特性

  • js中用特性这东西去区分属性类型。对于数据属性,它有以下4个特性去说明它是数据属性
名字 作用
[[Configurable]] 表示能否通过delete来删除属性,能否修改属性的特性,或能否把属性设为访问器属性,默认true。
[[Enumerable]] 能不能通过for in枚举该属性,默认true。
[[Writable]] 能不能修改属性值,默认true。
[[Value]] 这个位置保存属性的值。比如下面的name属性,它的[[Value]]就保存"ry"这个字符串
  • 数据属性长什么样子(也就那样,以前那样)
//一个对象
var person = {
//这就是一个数据属性
name:"ry";
};
console.log(person.name); //ry
//透过代码可以看出,以前我们定义对象属性就是数据属性,以前不知道它叫数据属性这个名字,但现在知道了。
  • 测试一下特性吧。用Object.defineProperty(),修改特性用到这个函数Object.defineProperty():接受3个参数:属性所在对象,属性名字,描述符对象
//创建一个对象person
var person = {};
//添加一个数据属性
person.name = "ry";
//使用Object.definProperty方法
Object.definProperty(person,"name",{
//writable表示能不能修改,false表示不能
writable:false,
}) console.log(person.name); "ry"
//修改name的值
person.name = "yuan";
//name的值不变,修改不了
console.log(person.name); "ry"

除此之外还可以修改其他特性,大家可以试试哦。

2.访问器属性

访问器属性的4个特性:

名字 作用
[[Configurable]] 表示能否通过delete来删除属性,能否修改属性的特性,或能否把属性设为访问器属性,默认true。
[[Enumerable]] 能不能通过for in枚举该属性,默认true。
[[Get]] 读取时调用的函数,默认undefined
[[Set]] 写入时调用的函数,默认undefined

访问器属性特性不包含数据值,它们包含一对getter和setter函数(但这两个不是必须的)

访问器属性不能直接定义,只能通过Object.defineProperty()来定义。

▶ 书上的例子:

//一个对象
var book = {
_year : 2004,
edition : 1
}; //定义一个叫year的访问器属性
Object.defineProperty(book,"year",{
//设置get特性,这是一个方法
get: function(){
retrun this._year;
};
//设置set特性
set:function(newValue){
if(newValue > 2004){
this._year = newValue;
this.edition += newValue - 2004;
}
}
}); //测试一下,给访问器属性赋值,即写入year,它会调用set的方法
book.year = 2005;
//上面的2005大于2004,set方法中会改变edition的值,变成2
console.log(book.edtion); //2

▶ 特别提醒:Objecct.defineProperty() 的兼容性:IE9+,Firefox4+,chrome,Opera12+,Safari 5+

▶ 除此之外

  • 还有一次定义多个属性的方法:Objecct.defineProperties() , 兼容性:IE9+,Firefox4+,chrome,Opera12+,Safari 5+。

  • 读取属性特性方法:Object.getOwnPropertyDescriptor(),接受两参数:属性所在对象和要读取器描述符的属性名称。 返回一个对象。

//实践比较容易理解
//一个对象
var book = {};
//用Objecct.defineProperties()方法设置多个属性
Object.defineProperties(book,{
_year:{
value:"ry"
},
edition:{
value:1
},
year:{
get:function(){
return this._year ;
}
}
}); //函数返回一个对象
//descriptor对象有configurable,enumerable,writable,value属性/(如果是访问器属性:configurable,enumerable,get,set)
//_year是数据属性
var descriptor = Object.getOwnPropertyDescriptor(book,"_year");
console.log(descriptor.value); //2004
console.log(descriptor.configurable); //true
console.log(descriptor.enumerable); //true
//数据属性没有get
console.log(descriptor2.get); //undefined //year是访问器属性
var descriptor2 = Object.getOwnPropertyDescriptor(book,"year");
//访问器属性有get
console.log(descriptor2.get); //function

四、小结

这次介绍主要介绍:

1.什么是对象:无序属性的集合。

2.还有属性的类型:数据属性和访问器属性。还有两种属性的各个特性,区别。不用深入,起码知道有这些东西。

3.属性的类型有个了解就好,主要用的还是数据属性(平时用的)。

不忘初心,方得始终。觉得写得很好就赞一下吧,也可以关注博主哦

同系列前几篇:

第一篇:JavaScript--我发现,原来你是这样的JS(一)(初识)

第二篇:JavaScript--我发现,原来你是这样的JS(二)(基础概念--躯壳篇)

第三篇:JavaScript--我发现,原来你是这样的JS(三)(基础概念--灵魂篇)

第四篇:JavaScript--我发现,原来你是这样的JS(四)(看看变量,作用域,垃圾回收是啥)

第五篇:JavaScript--我发现,原来你是这样的JS(引用类型不简单[上篇],且听我娓娓道来)

第六篇:JavaScript--我发现,原来你是这样的JS(引用类型不简单[下篇],基本包装类型与个体内置对象)

本文出自博客园:http://www.cnblogs.com/Ry-yuan/

作者:Ry(渊源远愿)

欢迎转载,转载请标明出处,保留该字段。

JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[1]--(理解对象和对象属性类型)的更多相关文章

  1. JS--我发现,原来你是这样的JS:面向对象编程OOP[1]--(理解对象和对象属性类型)

    一.介绍 老铁们,这次是JS的面向对象的编程OOP(虽然我没有对象,心累啊,但是可以自己创建啊,哈哈). JS高程里第六章的内容,这章内容在我看来是JS中很难理解的一部分.所以分成三篇博客来逐个理清. ...

  2. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

  3. JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)

    一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...

  4. JS--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)

    一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...

  5. JavaScript (JS) 面向对象编程 浅析 (含对象、函数原型链、闭包解析)

    1. 构造函数原型对象:prototype ① 构造函数独立创建对象,消耗性能 function Person(name) { this.name = name; this.sayHello = fu ...

  6. JavaScript 面向对象编程(四)的常用方法、属性总结

    面向对象的属性.方法.操作符总结,都是干货.想深入掌握面向对象的程序设计模式,必须掌握一下知识点.下列知识点注重于实现,原理还请借鉴<javascript高级程序设计> (基于javasc ...

  7. Javascript object.constructor属性与面向对象编程(oop)

    定义和用法 在 JavaScript 中, constructor 属性返回对象的构造函数. 返回值是函数的引用,不是函数名: JavaScript 数组 constructor 属性返回 funct ...

  8. javascript 学习笔记之面向对象编程(一):类的实现

    ~~想是一回事,做是一回事,写出来又是一回事~~一直以来,从事C++更多的是VC++多一些,从面向过程到面向对象的转变,让我对OO的编程思想有些偏爱,将一个客观存在的规律抽象出来总是让人比较兴奋,通过 ...

  9. 探讨javascript面向对象编程

    (个人blog迁移文章.) 前言: 下面将探讨javascript面向对象编程的知识. 请不要刻意把javascript想成面向对象编程是理所当然的. javascript里面,对象思想不可少,但是不 ...

随机推荐

  1. XML功能

    REF:https://www.baidu.com/link?url=_-UY8rZVAORlesKTth0F7C8LbvXCL4lSwz6vmQVnTEgmT06NFGdoaD9FbuEQhR7xG ...

  2. Routing in ASP.NET Core

    .NET-Core Series Server in ASP.NET-Core DI in ASP.NET-Core Routing in ASP.NET-Core Error Handling in ...

  3. 中文转unicode,中文转bytes,unicode转bytes java实现

    utf-8 utf-8格式的中文由三位字节组成. UTF-8的编码规则很简单,只有二条: 1)对于单字节的符号,字节的第一位设为0,后面7位为这个符号的unicode码.因此对于英语字母,UTF-8编 ...

  4. 快速学会require的使用

    快速学会使用require.js 1.get start 先到官网下载requirejs到本地,官方同时提供Node版本r.js,我们只使用requirejs即可. 接下来在页面上写入 <scr ...

  5. JavaScript 框架------------AngularJS(上)

    一.简单了解一下AngularJS AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 ...

  6. 【京东账户】——Mysql/PHP/Ajax爬坑之添加购物车

    一.引言 做京东账户项目中的购物车模块,功能之一就是添加购物车.要用到的是Apach环境,Mysql.PHP以及Ajax. 预计效果:用户点击->"加入购物车"  添加成功 ...

  7. JAVA基础---编码解码

    所谓编码 即char->byte 所谓解码 即byte->char ISO-8859-1 中文字符会被黑洞吸收 全部变为"?" GB2312 汉字可以被编码为双字节 但 ...

  8. 关于Vue问题记录

    第一次安装Vue时,npm run dev报错处理 1.如果是报错:提示说没找到test这个文件夹 参考资料:https://segmentfault.com/q/1010000010893904 就 ...

  9. 《深入浅出设计模式》读书笔记 C#版(第一章)

    原始需求和设计 事情是这样开始的,公司需要做一套程序,鸭子,设计如下: 一个鸭子父类,多个派生类,三个可override的方法. 第一次需求变更 我们要会飞的鸭子!!!!! 所以我们做了如下的更改: ...

  10. Qt中的坐标系统

    Qt使用统一的坐标系统来定位窗口部件的位置和大小. 以屏幕的左上角为原点即(0, 0)点,从左向右为x轴正向,从上向下为y轴正向,这整个屏幕的坐标系统就用来定位顶层窗口: 此外,窗口内部也有自己的坐标 ...