07-javascript基础----js对象&&继承

一、对象基础

1. 对象属性的方式

对象属性的方式有两种：

1. obj.xxx
2. obj['xxx']

那么，什么时候用到第二种（[‘属性名’]）的方式呢？

• 当属性名不是合法的标识名时

  var obj = {}
  
  obj.content-type = 'application'  // 报错
  
  obj['content-type'] = 'application' // 正确
  

• 当 属性名不确定时

  var obj = {}
  
  // 想要将 param 的值 作为 key
  var param = 'age'
  
  obj.param = 42 // 变成了 {param: 42}，不是想要的
  
  obj[param] = 42 // {age: 42},正确
  

2. 对象的 key必须都是字符串

在 JS中，对象的 key 值，必须都是字符串形式

如果 key 是一个 对象、数组，那么会调用 toString方法，再存储进对象中

var a = {}

var obj1 = {n: 2}
var obj2 = {m: 3}

/*
	先调用 Obj1.toString()方法，变成 [object Object]
	所以 变成 a = {
		[object Object]: 4
	}
*/
a[obj1] = 4  
a[obj2] = 5 

// 所以最后操作的，都是 key = [object Object] 的属性，a['[objetc Object]']
console.log(a[obj1])

二、对象构建模式（进化史）

1、Object构造模式

• 步骤：先创建空Objetc对象，再动态添加属性、方法

• 缺点：语句太多

var obj = new Object()
obj.name = 'Tom'
obj.age = 42

2、对象字面量（重点）

• 步骤：使用{}创建对象，同时指定属性、方法
• 缺点：如果创建多个对象，有重复代码

// 创建一个
var obj = {name: 'Tom', age: 42}

// 但如果要同时创建多个，就很繁琐
var obj2 = {name: 'Jerry', age: 18}
var obj3 = {name: 'Tanmi', age: 20}
var obj4 = {name: 'Duck', age: 22}

3、工厂模式

• 步骤：通过工厂函数 动态创建对象并返回
• 适用于创建多个对象
• 问题：对象没有一个具体的类型，都是 Object 类型

// 工厂函数：返回一个需要的数据的函数
function Person(name, age) {
	return {
		name,
        age
    }
}

var obj = Person('Tom', 42)
var obj2 = Person('Jerry', 18)

4、构造函数模式（类）

• 步骤：自定义构造函数，通过new创建对象
• 适用于创建多个类型确定的对象
• 缺点：每创建一个实例，每个实例上都带着相同的方法，浪费内存

function Person(name, age) {
  this.name = name
  this.age = age
  this.showName = function () {
    console.log(this.name)
  }
}

var person1 = new Person('Tom', 42)
var person2 = new Person('Jerry', 18)

console.log(person1)
console.log(person2)

5、构造函数 + 原型组合模式

• 步骤：自定义构造函数，属性在函数初始化，方法添加到原型上
• 解决了构造函数模式占用内存的问题

// 使用类
function Person(name, age) {
  this.name = name
  this.age = age
}

// 使用 原型
Person.prototype.showName = function() {
  console.log(this.name)
}

var person1 = new Person('Tom', 42)
var person2 = new Person('Jerry', 18)

person1.showName()
person2.showName()
    
console.log(person1)
console.log(person2)

三、继承模式

1、原型链继承

• 重点：子类的原型 成为 父类的实例
• 代码：子类对象.prototype = new 父类对象()
• 注意：别忘了指定子类原型对象的构造函数为自己本身：子类对象.prototype.constructor = 子类本身
• 理解：

// 父类： Person
function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.showName = function() {
  console.log(this.name)
}


// 子类： Child
function Child(name, age) {
  this.name = name
  this.age = age
} 

var child = new Child('Jerry', 18)
/*
	如何使得 child 可以调用 showName 方法呢
	child.showName()
*/

下图是原本的原型链图：

那么，我们修改原型链，将Child的原型对象的 上级 改为 Person的原型对象就好了

所以：

// 父类： Person
function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.showName = function() {
  console.log(this.name)
}


// 子类： Child
function Child(name, age) {
  this.name = name
  this.age = age
} 

// 1. 使得 子类的原型对象成为父类的实例对象
Child.prototype = new Person()
// 2. 补充原型的构造函数 为子类本身
Child.prototype.constructor = Child

var child = new Child('Jerry', 18)
// Child --> Child.prototype --> Person.prototype(showName) --> Object.prototype
child.showName() // Jerry

2、借用构造函数继承

用于继承属性

步骤：

1. 使用父类的构造方法，作为继承属性方法
2. 改变父类构造方法this指向

// 父类： Person
function Person(name, age) {
  this.name = name
  this.age = age
}

// 子类： Child
function Child(name, age, sex) {
  // this.name = name
  // this.age = age 
    
  // 1. 借用 Person 中的代码
  // 2. 更改this指向，改为指向 Child的实例对象
  Person.call(this, name, age)  
    
  this.sex = sex
} 

var child = new Child('Jeery', 18, 'man')

3、借用构造函数继承 + 原型链继承

• 原型链继承：可以继承父类的方法
• 借用构造函数继承：可以继承父类的属性
• 组合起来，就是一个合格的继承了

// 父类： Person
function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.showName = function() {
  console.log(this.name)
}

// 子类： Child
function Child(name, age, sex) {
  // 1. 接用 Person 中的代码
  // 2. 更改this指向，改为指向 Child的实例对象
  Person.call(this, name, age)
  this.sex = sex
} 
// 3. 使得 子类的原型对象成为父类的实例对象
// 4. 补充原型的构造函数 为子类本身
Child.prototype = new Person()
Child.prototype.constructor = Child


var child = new Child('Jeery', 18, 'man')
child.showName()