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

时间:2023-04-22 13:27:02

一、介绍

老铁们,这次是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(渊源远愿)

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