Skip to content

8-对象.md

Latest commit

 

History

History
244 lines (152 loc) · 5.25 KB

8-对象.md

File metadata and controls

244 lines (152 loc) · 5.25 KB

对象

知识点

  1. 对象的创建

  2. 对象的用途

  3. 对象的属性操作

  4. 遍历一个对象的属性

  5. 内置对象 Object

  6. 构造函数 constructor

  7. 面向对象编程

  8. 类

  9. 封装

  10. 继承

javascript 的对象是一种无序的集合数据类型，它由若干键值对组成。是 javascript 最重要的数据类型，在 javascript 中所有的数据都可以被视为对象。

对象的创建

  • 对象初始化器（字面量创建）
var me = {
    name: 'qingzhui',
    age: 26
};
  • 构造函数
var me = new Object();
me.name = 'qignzhui';
me.age = 26;
  • Object.create()
var me = Object.create(Object.prorotype, {
    name: {
        vaule: 'qingzhui',
        writable: true,
        enumerable: true,
        configurable: true
    },
    age: {
        value: 26,
        writable: true,
        enumerable: true,
        configurable: true
    }
});

上面三种方式都是创建同一个对象 me，需要注意的是：

  • 属性名的类型是字符串，如果不是，会自动转换成字符串类型。

  • 属性值可以是任何类型，如果是一个属性的值为函数，我们又称这个属性为 ‘方法’，它可以像函数那样调用。

对象的用途

  • 数据结构，作为 key/value 的列表集合。

  • 用于面向对象编程，对象是一堆数据和方法。

对象的属性操作

  • 读取属性

读取属性操作方法有两种，使用点运算符或方括号运算符。

var me = {
    name: 'qingzhui'
};

console.log(me.name); // 'qingzhui'
console.log(me['name']); // 'qingzhui'

使用方括号运算符，键名必须放在引号里面，否则会被当作变量处理，方括号运算符，可以读取 "不符合标识符的属性"

  • 添加属性

点运算符或方括号运算符不仅可以读取运算符，还可以用来对属性赋值。

var me = {
    name: 'qingzhui'
};

//增加 age 属性
me.age = 26; // 也可以写成 me['age'] = 26;

//改变属性的值
me.name = 'scl';

console.log(me.name); // 'scl'
  • 删除属性

delete 命令用于删除对象的属性，删除成功后返回 true

//删除 name 属性
delete me.name; // true

console.log(me.name) // 'undefined'

delete 命令只能删除对象本身的属性，无法删除继承的属性

遍历一个对象的属性

  • for-in

它遍历的是对象所有可遍历（enumberable）的属性，会跳过不可遍历的属性

它不仅遍历对象自身的属性，还遍历继承的属性

var me = {
    name = 'qingzhui',
    age: 26
};

for(var a in me){
    console.log(a);
}

//输出
// 'name'
// 'age'
  • Object.keys()
var me = {
    name = 'qingzhui',
    age: 26
};

console.log(Object.keys(me)); // ['name', 'age']

Object.keys(me).forEach(function(x){
    console.log(x);
});

//输出
// 'name'
// 'age'
  • Object.getOwnPropertyNames()
var me = {
    name = 'qingzhui',
    age: 26
};

console.log(Object.getOwnPropertyNames(me)); // ['name', 'age']

内置对象 Object

  • 用途

  • 内置的静态方法

  • 内置的实例方法

构造函数（constructor）

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个 prototype 属性。在默认情况下，所有 prototype 属性都会自动获得一个 constructor (构造函数) 属性，这个属性包含一个指向 prototype 属性所在函数的指针。

面向对象编程

类

封装

继承

  • 查找对象的原型对象

    • obg.proto

    • Object.getPrototypeOf(obj)

    • Object.isPrototypeOf()

  • Object()

  • 自定义构造函数

  • 工厂模式

  • 构造函数模式

  • 原型模式

  • 组合使用构造函数和原型模式

  • 动态原型模式

  • 寄生构造函数模式

  • 稳妥构造函数模式

资源

object

MDN 使用对象

全面理解面向对象的 JavaScript

eloquent javascript object

objects in detail

细说JavaScript中对象的属性和方法

JavaScript Object Creation: Patterns and Best Practices

Prototypal Object-Oriented Programming using JavaScript

Javascript 面向对象编程（一）：封装