浅谈对JS面向对象的理解(一)

类——是面向对象语言中共有的一个标志,基于类可以创建任意多个具有相同属性和相同方法的对象。但ECMAScript却没有类的概念,所以它的对象与其它基于类的语言中的对象是有所不同的。

1、JS对象定义的两种方式

1.1 方式一:

先创建对象的实例,然后再添加属性和方法。

var person = new Object();
person.name = 'qixige';
person.age = 18;
person.job = 'engineer';

person.say = function(){
    alert("wlcome to qixige");
}

1.2 方式二:对象字面量

var person = {
    name: 'qixige',
    age: 18,
    job: 'engineer',
    say: function(){
        alert("welcome to qixige");
    }
}

在实际的开发过程中,建议首选对象字面量的方式创建对象。

2、属性类型

ECMA-262规定为实现js引擎,只能内部才用的特性,js无法直接访问它们。通过用两个方括号来表示特性是内部值。如:[[属性名]]

2.1 数据属性

四个特性:
    [[Configurable]]
        默认值为 true。表示能否通过delete删除属性、修改属性和把属性改为访问器属性。
    [[Enumerable]]
        默认值为 true。表示能否通过for-in循环返回属性。
    [[Writable]]
        默认值为true。表示能否修改属性值。
    [[Value]]
        默认undefined。表示属性的数据值,读取和写入都保存在这里。

如果要修改上面的属性,则需要使用Object.defineProperty()方法。

调用的时候需要传入三个参数:属性所在的对象、属性的名字、描述符对象(注:只能是上面四个属性)。

这里需要注意两点

1、如果将 [[Writable]] 的值改为只读(false),那么[[Value]]的值就不可修改;强行修改,在非严格模式下,该操作会被忽略;在严格模式下,就会报错。如下图所示:

"js对象"

2、如果将 [[Configurable]] 的值改为false,则就无法再将其改回为true。再次调用Object.defineProperty()方法修改除 writable 以外的特性,都会报错。

2.2 访问器属性

四个特性:
    [[Configurable]]
        默认值为 true。表示能否通过delete删除属性、修改属性和把属性改为访问器属性。
    [[Enumerable]]
        默认值为 true。表示能否通过for-in循环返回属性。
    [[Get]]
        默认值为 undefined。读取属性时调用的函数(非必需)。
    [[Set]]
        默认值为 undefined。写入属性时调用的函数(非必需)。

同样的,访问器属性不能直接定义,也需要通过调用Object.defineProperty()来定义。再属性名前面加下划线’_’,表示只能通过对象方法访问的属性。 举个例子:

var person = {
    name: 'qixige',
    age: 18,
    _job: 'engineer'
}

Object.defineProperty(person,'job',{
    get: function(){
        return this._job;
    },

    set: function(newJob){
        if(newJob !== undefined){
            this._job = newJob;
        }
    }
});

person.job = 'manager';
alert(person.job);    //manager

3、定义多个属性

ECMAScript5定义了一个 Object.defineProperties() 方法来为对象定义多个属性。
调用的时候需要传入两个参数:需要添加和修个属性的对象、第二个对象的属性和第一个要添加和修改的对象的属性一一对应。例如:

var person = {}

Object.defineProperties(person, {
    name: {
        writable: false,
        value: 'qixige'
    },

    _job: {
        writable: true,
        value: 'engineer'
    },

    job: {
        get: function(){
            return this._job;
        },

        set: function(newJob){
            if(newJob !== undefined){
                this._job = newJob;
            }
        }
    }
});

4、读取属性的特性

Object.getOwnPropertyDescriptor()方法可以取得给定属性的描述符。

格式

Object.getOwnPropertyDescriptor(属性所在对象, 要读取的描述符名称);

5、参考链接

1、《JavaScript 高级程序设计 (第三版)》 人民邮电出版社

-------------本文结束感谢您的阅读-------------
Mr.wj wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!