你不知道的JS读书笔记3—对象与类

最新推荐文章于 2024-04-29 23:14:46 发布

野草_前端

最新推荐文章于 2024-04-29 23:14:46 发布

阅读量251

点赞数

分类专栏：读书笔记 JavaScript 文章标签： javascript 对象

本文链接：https://blog.csdn.net/fen747042796/article/details/60583271

版权

JavaScript 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

读书笔记

6 篇文章 0 订阅

订阅专栏

关于JS对象，我觉得大家应该再熟悉不过了。下面就总结一点我不算很熟悉的，或者需要注意的知识点。然后顺便提一下传统中的类，JavaScript是怎么模拟实现的。

对象基础知识

对象，是由无序的键值对组成，而且键是字符串。如果不是字符数据类型，会自动调用toString方法转化为字符类型。

比如，

obj['1'] = 1;
obj[1] //1
obj[{}] = 2;   
obj['[object Object]']; // 2

ES5中新增属性描述符，用以下方式定义对象属性：

Object.defineProperty(obj, attr, {
    value:  2017, // 值
    writable: false,  // 可写
    configurable: false, // 可配置
    enumerable:  false // 可枚举
})

还可以用getter，setter来定义：

var obj = { 
    get name(){
        return  this._name;
    }, 
    set name(val){ 
        this._name = val;
    }
};

obj.name = '2017';
obj.name; // '2017'
// 或者
Object.defineProperty(obj,'gender', {
    get : function(){
        return this._gender;
    }, 
    set: function(val){
        this._gender = val;
    } , 
    configurable:  true, 
    enumerable: true 
});

obj.gender = 'female';
obj.gender; // 'female'

需要注意的是，用Object.defineProperty定义的时候，value&writable与get&set只能二者选其一。

获取属性描述，Object.getOwnPropertyDescriptor(obj, attr);

如果是obj.a = 2这种方式定义的，三个属性（可写，可配置，可枚举）默认为true；而如果是Object.defineProperty(obj, ‘a’, { value:2 })定义的话，则相反。

writable 为 false的话，不能被修改；
configurable 为false的话，不能用Object.defineProperty配置，也不能被删除
enumerable 为false的话，不能被枚举
- 可以用Object.propertyIsEnumerable(obj.a)去检测
- 在for .. in obj中，obj及其原型链上的所有可枚举的属性会被列出
- 而.. in obj 可以获取obj及其原型链上所有的属性，包括不可枚举
- 用obj.hasOwnProperty(‘a’)去检测这个属性是否是它本身的属性而不是在原型链上找到的
- Object.keys(obj) 也不能获取到不可枚举的属性

P.S. ES中对数组的枚举可以用for of：

var mateArray = ['John', 'Ash', 'Rob'];
for(var item of mateArray){
    console.log(item);
}
// John
//  Ash
//  Rob

模拟类的几种方式

面向对象的编程思想给我们带来了众多好处，很多语言都支持。而JavaScript没有真正的类，我们用对象来模拟类。简单来说，对象的创建只有两种方式：字面量形式和构造函数形式。

//字面量形式
var person = {
    'name': 'Claire',
    'sayHello': function(){
        console.log('hello, my name is ' + this.name);
    }
}

// 构造函数形式
var person = new Object();
person.name = 'Claire';
person.sayHello = function(){
    console.log('hello, my name is ' + this.name);
};

因为类就是用对象模拟的，所以上面两种也是创建类的方式。由于对象具有原型属性，可以用以下的方式创建：

// 构造函数+原型形式
function Person(){
    this.name = 'Claire';
} 
Person.prototype.sayHello = function(){
    console.log('hello, my name is ' + this.name);
};

var me = new Person();