目录JavaScript 对象创建方式详解1.1 构造函数创建对象1.2 对象字面量创建对象1.2.1 基本语法1.2.2 访问对象成员1.2.3 遍历对象属性1.2.4 this 关键字1.3 工厂模式创建对象1.4 构造函数模式1.4.1 基本用法1.4.2 new 的执行过程1.4.3 优化方法定义1.5 原型模式1.5.1 原型对象1.5.2 原型链1.6 垃圾回收1.7 ES6 Class 语法JavaScript 对象创建方式详解1.1 构造函数创建对象1.2 对象字面量创建对象1.2.1 基本语法1.2.2 访问对象成员1.2.3 遍历对象属性1.2.4 this 关键字1.3 工厂模式创建对象1.4 构造函数模式1.4.1 基本用法1.4.2 new 的执行过程1.4.3 优化方法定义1.5 原型模式1.5.1 原型对象1.5.2 原型链1.6 垃圾回收1.7 ES6 Class 语法JavaScript 对象创建方式详解1.1 构造函数创建对象使用new Object()构造函数创建对象是最基础的方式var obj new Object(); obj.name 张三; obj.gender 男; obj.age 18;特点使用new关键字调用构造函数语法较为冗长主要用于理解对象的基本概念1.2 对象字面量创建对象1.2.1 基本语法对象字面量提供更简洁的创建方式var obj { name: 猪八戒, age: 28, gender: 男, sayHi: function() { console.log(hi~); } };注意事项采用键值对形式定义属性多个属性间用逗号分隔方法本质上是匿名函数1.2.2 访问对象成员// 点语法访问 console.log(obj.name); // 方括号访问 console.log(obj[age]); // 调用方法 obj.sayHi();1.2.3 遍历对象属性使用for...in循环遍历对象for (var prop in obj) { console.log(属性名n); console.log(属性值obj[n]); }1.2.4 this 关键字this的指向规则函数调用指向 window方法调用指向调用对象构造函数调用指向新对象function showName() { console.log(this.name); } var obj1 { name: 孙悟空, show: showName }; var obj2 { name: 沙和尚, show: showName }; showName(); // 全局 obj1.show(); // 孙悟空 obj2.show(); // 沙和尚1.3 工厂模式创建对象解决批量创建对象问题function createPerson(name, age) { var obj new Object(); obj.name name; obj.age age; return obj; }缺点对象类型无法区分构造函数均为 Object1.4 构造函数模式1.4.1 基本用法function Person(name, age) { this.name name; this.age age; this.sayHi function() { console.log(Hi); }; } var p1 new Person(张三, 20);特点首字母大写约定必须使用 new 调用通过 this 添加成员1.4.2 new 的执行过程创建新对象绑定 this执行构造函数返回对象1.4.3 优化方法定义将方法提取到外部避免重复创建function sayHi() { console.log(Hi); } function Person(name) { this.name name; this.sayHi sayHi; }1.5 原型模式1.5.1 原型对象function Person() {} Person.prototype.name 张三; Person.prototype.sayHi function() { console.log(Hi); };特点所有实例共享原型成员方法只需定义一次1.5.2 原型链属性查找顺序对象自身原型对象Object.prototypenull1.6 垃圾回收JavaScript 自动管理内存var obj new Object(); // 解除引用 obj null;1.7 ES6 Class 语法class Person { constructor(name) { this.name name; } sayHi() { console.log(Hi, ${this.name}); } }特点语法更简洁本质仍是构造函数原型方法自动添加到原型JavaScript 对象创建方式详解1.1 构造函数创建对象使用new Object()构造函数创建对象是最基础的方式var obj new Object(); obj.name 张三; obj.gender 男; obj.age 18;特点使用new关键字调用构造函数语法较为冗长主要用于理解对象的基本概念1.2 对象字面量创建对象1.2.1 基本语法对象字面量提供更简洁的创建方式var obj { name: 猪八戒, age: 28, gender: 男, sayHi: function() { console.log(hi~); } };注意事项采用键值对形式定义属性多个属性间用逗号分隔方法本质上是匿名函数1.2.2 访问对象成员// 点语法访问 console.log(obj.name); // 方括号访问 console.log(obj[age]); // 调用方法 obj.sayHi();1.2.3 遍历对象属性使用for...in循环遍历对象for (var prop in obj) { console.log(属性名${prop}); console.log(属性值${obj[prop]}); }1.2.4 this 关键字this的指向规则函数调用指向 window方法调用指向调用对象构造函数调用指向新对象function showName() { console.log(this.name); } var obj1 { name: 孙悟空, show: showName }; var obj2 { name: 沙和尚, show: showName }; showName(); // 全局 obj1.show(); // 孙悟空 obj2.show(); // 沙和尚1.3 工厂模式创建对象解决批量创建对象问题function createPerson(name, age) { var obj new Object(); obj.name name; obj.age age; return obj; }缺点对象类型无法区分构造函数均为 Object1.4 构造函数模式1.4.1 基本用法function Person(name, age) { this.name name; this.age age; this.sayHi function() { console.log(Hi); }; } var p1 new Person(张三, 20);特点首字母大写约定必须使用 new 调用通过 this 添加成员1.4.2 new 的执行过程创建新对象绑定 this执行构造函数返回对象1.4.3 优化方法定义将方法提取到外部避免重复创建function sayHi() { console.log(Hi); } function Person(name) { this.name name; this.sayHi sayHi; }1.5 原型模式1.5.1 原型对象function Person() {} Person.prototype.name 张三; Person.prototype.sayHi function() { console.log(Hi); };特点所有实例共享原型成员方法只需定义一次1.5.2 原型链属性查找顺序对象自身原型对象Object.prototypenull1.6 垃圾回收JavaScript 自动管理内存var obj new Object(); // 解除引用 obj null;1.7 ES6 Class 语法class Person { constructor(name) { this.name name; } sayHi() { console.log(Hi, ${this.name}); } }特点语法更简洁本质仍是构造函数原型方法自动添加到原型