资讯专栏INFORMATION COLUMN

js面向对象浅析---初识

evin2016 / 657人阅读

摘要:中的对象无序的属性的集合,属性可以包含基本值对象函数。共有四个描述其行为的特性。返回的是一个对象,如果是数据属性,则返回的属性有如果是访问器属性则返回的属性有对象遍历函数数据属性访问器属性测试

前言

基于类的对象:我们都知道面向对象的语言中有一个明显的标志,就是都有类的概念,通过类这个类似模板的东西我们可以创建许多个具有相同的属性和方法的对象。然而在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);

测试

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86159.html

相关文章

  • js面向对象浅析--继承那些事

    摘要:有需要还可以修改指向谦龙寄生组合式继承思路是通过借用构造函数来继承属性,通过原型链的混合形式来继承方法改变执行环境实现继承有需要还可以修改指向谦龙谦龙拷贝继承该方法思路是将另外一个对象的属性和方法拷贝至另一个对象使用递归 前言 js中实现继承的方式只支持实现继承,即继承实际的方法,而实现继承主要是依靠原型链来完成的。 原型链式继承 该方式实现的本质是重写原型对象,代之以一个新类型的实例...

    molyzzx 评论0 收藏0
  • JavaScript MVC 学习笔记(一)初识JS MVC

    摘要:以基于的富应用开发为主要学习资料。下面用实现一个例子使用匿名函数来封装一个作用域在页面加载时绑定事件监听上面的代码创建了控制器,这个控制器是放在变量下的命名空间。然后用了一个匿名函数封装了一个作用域,以避免对全局作用域造成污染。 公开记录学习JS MVC,不知道能坚持多久= =。以《基于MVC的JavaScript web富应用开发》为主要学习资料。 什么是MVC MVC 是一种设...

    xorpay 评论0 收藏0
  • js面向对象浅析---对象创建的几种常见方式

    摘要:前言虽然使用构造函数或者使用对象字面量可以很方便的用来创建一个对象,但这种方式有一个明显的缺点使用一个接口创建多个对象会产生很多冗余的代码。即调用构造函数所创建的那个对象的原型对象好处是可以让所有对象的实例共享他的属性的方法。 前言 虽然使用Object构造函数或者使用对象字面量可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码。因此...

    Invoker 评论0 收藏0
  • ES2015入门系列1-初识ES2015

    EcmaScript 其实是一种语言规范,常见的 JavaScript, ActionScript 等都是其具体实现,平时使用中一般可以将其和Javascript对等称呼,本系列教程主要讲述 EcmaScript2015(ES6) 为JavaScript带来的新的特性,并初步掌握如何利用其进行开发。 本系列面向有一定基础知识的ES5使用者,不适合初学者。 先来看两段代码: Human.js exp...

    hellowoody 评论0 收藏0
  • 【C++】初识类和对象

    摘要:三类的定义类体由成员函数和成员变量组成一定要注意后面的分号为定义类的关键字,为类的名字,中为类的主体,注意类定义结束时后面分号。在类和对象阶段,我们研究类的封装特性。 ...

    garfileo 评论0 收藏0

发表评论

0条评论

evin2016

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<