JavaScript 对象与原型

[JavaScript 对象创建方式详解](#JavaScript 对象创建方式详解)

[1.1 构造函数创建对象](#1.1 构造函数创建对象)

[1.2 对象字面量创建对象](#1.2 对象字面量创建对象)

[1.2.1 基本语法](#1.2.1 基本语法)

[1.2.2 访问对象成员](#1.2.2 访问对象成员)

[1.2.3 遍历对象属性](#1.2.3 遍历对象属性)

[1.2.4 this 关键字](#1.2.4 this 关键字)

[1.3 工厂模式创建对象](#1.3 工厂模式创建对象)

[1.4 构造函数模式](#1.4 构造函数模式)

[1.4.1 基本用法](#1.4.1 基本用法)

[1.4.2 new 的执行过程](#1.4.2 new 的执行过程)

[1.4.3 优化方法定义](#1.4.3 优化方法定义)

[1.5 原型模式](#1.5 原型模式)

[1.5.1 原型对象](#1.5.1 原型对象)

[1.5.2 原型链](#1.5.2 原型链)

[1.6 垃圾回收](#1.6 垃圾回收)

[1.7 ES6 Class 语法](#1.7 ES6 Class 语法)

[JavaScript 对象创建方式详解](#JavaScript 对象创建方式详解)

[1.1 构造函数创建对象](#1.1 构造函数创建对象)

[1.2 对象字面量创建对象](#1.2 对象字面量创建对象)

[1.2.1 基本语法](#1.2.1 基本语法)

[1.2.2 访问对象成员](#1.2.2 访问对象成员)

[1.2.3 遍历对象属性](#1.2.3 遍历对象属性)

[1.2.4 this 关键字](#1.2.4 this 关键字)

[1.3 工厂模式创建对象](#1.3 工厂模式创建对象)

[1.4 构造函数模式](#1.4 构造函数模式)

[1.4.1 基本用法](#1.4.1 基本用法)

[1.4.2 new 的执行过程](#1.4.2 new 的执行过程)

[1.4.3 优化方法定义](#1.4.3 优化方法定义)

[1.5 原型模式](#1.5 原型模式)

[1.5.1 原型对象](#1.5.1 原型对象)

[1.5.2 原型链](#1.5.2 原型链)

[1.6 垃圾回收](#1.6 垃圾回收)

[1.7 ES6 Class 语法](#1.7 ES6 Class 语法)

JavaScript 对象创建方式详解

1.1 构造函数创建对象

使用 new Object() 构造函数创建对象是最基础的方式：

js 复制代码

var obj = new Object();
obj.name = "张三";
obj.gender = "男";
obj.age = 18;

特点：

使用 new 关键字调用构造函数
语法较为冗长
主要用于理解对象的基本概念

1.2 对象字面量创建对象

1.2.1 基本语法

对象字面量提供更简洁的创建方式：

js 复制代码

var obj = {
  name: "猪八戒",
  age: 28,
  gender: "男",
  sayHi: function() {
    console.log("hi~");
  }
};

注意事项：

采用键值对形式定义属性
多个属性间用逗号分隔
方法本质上是匿名函数

1.2.2 访问对象成员

js 复制代码

// 点语法访问
console.log(obj.name);
// 方括号访问
console.log(obj["age"]);
// 调用方法
obj.sayHi();

1.2.3 遍历对象属性

使用 for...in 循环遍历对象：

js 复制代码

for (var prop in obj) {
  console.log(`属性名：`+n);
  console.log(`属性值：`obj[n]);
}

1.2.4 this 关键字

this 的指向规则：

函数调用：指向 window
方法调用：指向调用对象
构造函数调用：指向新对象

js 复制代码

function showName() {
  console.log(this.name);
}

var obj1 = { name: "孙悟空", show: showName };
var obj2 = { name: "沙和尚", show: showName };

showName();    // 全局
obj1.show();   // 孙悟空
obj2.show();   // 沙和尚

1.3 工厂模式创建对象

解决批量创建对象问题：

js 复制代码

function createPerson(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  return obj;
}
  var obj2=createPerson("猪八戒",28,"男");
  var obj3=createPerson("沙和尚",38,"男");
  var obj4=createPerson("白骨精",18,"女");

1.4 构造函数模式

1.4.1 基本用法

js 复制代码

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 优化方法定义

将方法提取到外部避免重复创建：

js 复制代码

function sayHi() {
  console.log("Hi");
}

function Person(name) {
  this.name = name;
  this.sayHi = sayHi;
}

1.5 原型模式

1.5.1 原型对象

js 复制代码

function Person() {}
Person.prototype.name = "张三";
Person.prototype.sayHi = function() {
  console.log("Hi");
};

特点：

所有实例共享原型成员
方法只需定义一次

1.5.2 原型链

属性查找顺序：

对象自身
原型对象
Object.prototype
null

1.6 垃圾回收

JavaScript 自动管理内存：

js 复制代码

var obj = new Object();
// 解除引用
obj = null;

1.7 ES6 Class 语法

js 复制代码

class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    console.log(`Hi, ${this.name}`);
  }
}

特点：

语法更简洁
本质仍是构造函数+原型
方法自动添加到原型

JavaScript 对象创建方式详解

1.1 构造函数创建对象

使用 new Object() 构造函数创建对象是最基础的方式：

js 复制代码

var obj = new Object();
obj.name = "张三";
obj.gender = "男";
obj.age = 18;

特点：

使用 new 关键字调用构造函数
语法较为冗长
主要用于理解对象的基本概念

1.2 对象字面量创建对象

1.2.1 基本语法

对象字面量提供更简洁的创建方式：

js 复制代码

var obj = {
  name: "猪八戒",
  age: 28,
  gender: "男",
  sayHi: function() {
    console.log("hi~");
  }
};

注意事项：

采用键值对形式定义属性
多个属性间用逗号分隔
方法本质上是匿名函数

1.2.2 访问对象成员

js 复制代码

// 点语法访问
console.log(obj.name);
// 方括号访问
console.log(obj["age"]);
// 调用方法
obj.sayHi();

1.2.3 遍历对象属性

使用 for...in 循环遍历对象：

js 复制代码

for (var prop in obj) {
  console.log(`属性名：${prop}`);
  console.log(`属性值：${obj[prop]}`);
}

1.2.4 this 关键字

this 的指向规则：

函数调用：指向 window
方法调用：指向调用对象
构造函数调用：指向新对象

js 复制代码

function showName() {
  console.log(this.name);
}

var obj1 = { name: "孙悟空", show: showName };
var obj2 = { name: "沙和尚", show: showName };

showName();    // 全局
obj1.show();   // 孙悟空
obj2.show();   // 沙和尚

1.3 工厂模式创建对象

解决批量创建对象问题：

js 复制代码

function createPerson(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  return obj;
}

缺点：

使用工厂方法创建的对象，使用的构造函数都是Object

所以创建的对象都是Object这个类型

就导致我们无法区分多种不同类型的对象

1.4 构造函数模式

1.4.1 基本用法

js 复制代码

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 优化方法定义

将方法提取到外部避免重复创建：

js 复制代码

function sayHi() {
  console.log("Hi");
}

function Person(name) {
  this.name = name;
  this.sayHi = sayHi;
}

1.5 原型模式

1.5.1 原型对象

js 复制代码

function Person() {}
Person.prototype.name = "张三";
Person.prototype.sayHi = function() {
  console.log("Hi");
};

特点：

所有实例共享原型成员
方法只需定义一次

1.5.2 原型链

属性查找顺序：

对象自身
原型对象
Object.prototype
null

1.6 垃圾回收

JavaScript 自动管理内存：

js 复制代码

var obj = new Object();
// 解除引用
obj = null;

1.7 ES6 Class 语法

js 复制代码

class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    console.log(`Hi, ${this.name}`);
  }
}

特点：

语法更简洁
本质仍是构造函数+原型
方法自动添加到原型