初步了解javascript面向对象


Posted in Javascript onNovember 09, 2015

前言

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

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

理解对象

创建对象的方式

1 创建一个对象的最简单的方式是创建一个Object实例,之后为其添加属性和方法。

例如

var person = new Object();
    person.name='谦龙';
    person.sex='男';
    person.sayNameAndSex=function(){
      console.log(this.name,this.sex)
    }
    person.sayNameAndSex(); // 谦龙 男

2 使用对象字面量形式

例如

var person={
    name:'谦龙',
    sex:'男',
    sayNameAndSex:function(){
      console.log(this.name,this.sex)
    }
  }
   person.sayNameAndSex(); // 谦龙 男

属性的类型

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

数据属性

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

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

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

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

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

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

DEMO

var person={};
Object.defineProperty(person,'name',{
 configurable:false,//表示不允许通过delete删除属性
 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

var book={
 _year:2015, //这里的下划线是常见的记号,表示只能通过对象的方法才能访问的属性
 edition:1
}
Object.defineProperty(book,'year',{
 get:function(){
  return this._year; //即默认通过 book.year获取值的时候 返回的是 boot._year的值
 },
 set: function (value) {//在对 boot.year设置值的时候 默认调用的方法 对数据进行处理
  var _year=this._year;
  if(value > _year){
   this._year=value;
   this.edition+=value-_year;
  }
 }
})
book.year = 2016;
console.log(book.year,book.edition); // 2016 2

定义多个属性

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

DEMO

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true //注意这里设置成true 才可以 "写" 默认是false 
 },
 edition:{
  value:1,
  writable:true //注意这里设置成true 才可以 "写" 默认是false
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _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,enumerable,get,set

DEMO

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true
 },
 edition:{
  value:1,
  writable:true
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _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 相关文章推荐
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
js date 格式化
Feb 15 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 #Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 #Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
Nov 09 #Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 #Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 #Javascript
jquery实现简易的移动端验证表单
Nov 08 #Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 #Javascript
You might like
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
js停止输出代码
2008/07/20 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python 中的int()函数怎么用
2017/10/17 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python标准库shutil用法实例详解
2018/08/13 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
质检员的岗位职责
2013/11/15 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
python+opencv实现视频抽帧示例代码
2021/06/11 Python
详解Java实践之适配器模式
2021/06/18 Java/Android