初步了解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 相关文章推荐
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
js调用图片隐藏&显示实现代码
Sep 13 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
vuex提交state&&实时监听state数据的改变方法
Sep 16 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
小程序自定义轮播图圆点组件
Jun 25 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
phpstorm编辑器乱码问题解决
2014/12/01 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python与php实现分割文件代码
2017/03/06 Python
解决yum对python依赖版本问题
2019/07/05 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Python 列表反转显示的四种方法
2020/11/16 Python
倩碧英国官网:Clinique英国
2018/08/10 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2019年最新借条范本!
2019/07/08 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书