JS面向对象编程

渊源远愿    2018-3-25

一、介绍

老铁们,这次是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(渊源远愿)
欢迎转载,转载请标明出处,保留该字段。






暗色背景
手机扫码阅读本页