初步了解javascript面向对象

JavaScript 2018-12-31

前言

基于类的对象：我们都知道面向对象的语言中有一个明显的标志，就是都有类的概念，通过类这个类似模板的东西我们可以创建许多个具有相同的属性和方法的对象。然而在ECMAScript中并没有类的概念，自然它与基于类的语言中的对象也会有所不同。

js中的对象：无序的属性的集合，属性可以包含基本值、对象、函数。即js中的对象是一组没有特定顺序的值，对象的每个属性或者方法都有一个自己的名字，而每个名字都与一个值相对应。

理解对象

创建对象的方式

添加属性和方法。

例如

属性的类型

ECMAScript有两种数据属性：数据属性和访问器属性。

数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。共有四个描述其行为的特性。

1.[[Configurable]]:表示能否通过delete删除属性从而重新定义属性...默认值为true

2.[[Enumerable]]:表示能否通过for in 循环返回属性...默认为true

3.[[Writable]]:表示能否修改属性的值...默认为true

4.[[Value]]:表示这个属性的值.默认为undefined

要修改属性默认的特性，必须使用ES5的Object.defineProperty()方法，而该方法接收三个参数：属性所在的对象、属性的名称、还有一个描述属性特性的对象(configurable、enumerable、writable、value)，设置其中的一个或者多个值可以修改对应的特性

DEMO

删除属性 writable:false,//表示不允许重写 ennumerable:false,//表示不允许通过for in遍历 value:'谦龙'//设置该对象中属性的值 }) person.name='谦龙2';//尝试重新设置结果不生效 delete person.name;//尝试删除结果不生效 for(var attr in person){ console.log(person[attr]);// false } console.log(person.name);//谦龙

注意：将 configurable 设置为false后不允许再次修改为true，另外在调用Object.defineProperty()方法的时候，configurable、ennumerable、writable默认值为false。

访问器属性

访问器属性不包含数据值，它们包含一对getter、setter函数(但是这两个函数并不是必须的)在读取访问器属性的时候，会调用getter函数，这个函数是负责返回有效的值，在写入访问器属性的时候会调用setter函数并传入新值，这个函数负责如何处理数据。

访问器属性具有如下的特性

[[configurable]] 表示能否通过delete来删除属性从而定义新的属性

[[enumerable]] 表示能否通过for in循环来遍历返回属性

[[get]] 在读取属性时候调用的函数，默认为undefined

[[set]] 在写入函数的时候调用的函数，默认的值为undefined

注意：访问器属性不能直接定义，必须通过Object.defineProterty()定义

DEMO

_year){ this._year=value; this.edition+=value-_year; } } }) book.year = 2016; console.log(book.year,book.edition); // 2016 2

定义多个属性

我们可以通过ES5中的Object.defineProperties()方法来给对象添加多个属性，该方法接受两个对象参数,第一个参数是要添加和修改其属性的对象，第二个对象的属性和第一个对象中要添加和修改的属性一一对应。

DEMO

_year){ this._year=value; this.edition+=value-_year; } } } }) book.year=2016; console.log(book.year,book.edition); // 2016 2

读取对象属性的特性

使用ES5中的Object.getOwnPropertyDescriptor()方法，可以去的给定的属性的描述符。

该方法接收两个参数：属性所在的对象和要读取描述符的属性名称。返回的是一个对象，如果是数据属性，则返回的属性有 configurable,enumerable,writable,value.如果是访问器属性则返回的属性有 configurable,get,set

DEMO

_year){ this._year=value; this.edition+=value-_year; } } } }) //对象遍历函数 function showAllProperties(obj){ for(var attr in obj){ console.log(attr+':'+obj[attr]); } } var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//数据属性 var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//访问器属性 showAllProperties(descriptor); console.log('============================'); showAllProperties(descriptor2);

以上关于初步了解javascript面向对象的全部内容就介绍到这里，下面将给大家介绍，感兴趣的朋友继续关注哦。

js 面向对象面向对象

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其他强类型语言...

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源...

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是须知的必须有...

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图，：视图模...