初步了解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 replace方法与正则表达式
Feb 19 Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 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
PHP5 字符串处理函数大全
2010/03/23 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python合并字符串的3种方法
2015/05/21 Python
Python进行数据提取的方法总结
2016/08/22 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
会计电算化专业应届大学生求职信
2013/10/22 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
创先争优公开承诺书
2014/08/30 职场文书
公司授权委托书
2014/10/17 职场文书
环保宣传语大全
2015/07/13 职场文书
安全生产学习心得体会
2016/01/18 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android