1.字面量方法（最原始）：
// 1.创建对象的字面量
var person = {
name: "Coderwhy",
age: 18,
height: 1.88,
sayHello: function () {
alert("My name is " + this.name)
}
}
// 2.调用对象的方法
person.sayHello()
明显的缺点: 使用同一个接口创建很多对象, 会产生大量的重复代码.
2.工厂模式创建对象:
// 创建工厂函数
function createPerson(name, age, height) {
var o = new Object()
o.name = name
o.age = age
o.height = height
o.sayHello = function () {
alert("Hello, My name is " + this.name)
}
return o
}
// 创建两个对象
var person1 = createPerson("Coderwhy", 18, 1.88)
var person2 = createPerson("Kobe", 30, 1.98)
person1.sayHello() // Hello, My name is Coderwhy
person2.sayHello() // Hello, My name is Kobe
函数createPerson()能够根据接受的参数来构建一个包含所有必要信息的Person对象
可以无限调用创建函数，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。
3.构造函数模式
// 构造函数
function Person(name, age, height) {
this.name = name
this.age = age
this.height = height
this.sayHello = function () {
alert(this.name)
}
}
// 使用构造函数创建对象
var person1 = new Person("Coderwhy", 18, 1.88)
var person2 = new Person("Kobe", 30, 1.98)
person1.sayHello() // Coderwhy
person2.sayHello() // Kobe
在这个例子中，Person()函数取代了createPerson()函数。
我们会发现这个函数有一些不太一样的地方:
1)没有显式地创建对象；(比如创建一个Object对象)
2)直接将属性和方法赋给了this对象；
3)没有return语句
还有, 我们在调用函数时, 不再只是简单的函数+(), 而是使用了new关键字
这种方式调用构造函数实际上会经历以下4个步骤：
1)创建一个新对象, 这个新的对象类型其实就是Person类型.
2)将构造函数的作用域赋给新对象（因此this就指向了这个新对象，也就是this绑定）；
3)执行构造函数中的代码（为这个新对象添加属性和方法）；
4)返回新对象, 但是是默认返回的, 不需要使用return语句；
在前面例子的最后，person1和person2分别保存着Person的一个不同的实例。
这两个对象都有一个constructor（构造函数）属性，该属性指向Person.
后面我们会详细说道constructor到底从何而来, 所以你需要特别知道一下这里有这个属性.
使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。解决方式 使用原型链,
- 我们创建的每个函数都有一个prototype（原型）属性
- 这个属性是一个指针，指向一个对象
- 而这个对象的作用是存放这个类型创建的所有实例共享的属性和方法。
- 指向的这个对象, 就是我们的所谓的原型对象.
原型对象的作用: - 使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。
- 换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。
原型对象的创建: - 无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。
原型上的constructor属性： - 默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。用我们上面的例子来说, Person.prototype.constructor指向Person。
- 也就是原型对象自身来说, 只有一个constructor属性, 而其他属性可以由我们添加或者从Object中继承.
新的实例创建时, 原型对象在哪里呢? - 当调用构造函数创建一个新实例后，该实例的内部将包含一个内部属性，该属性的指针, 指向构造函数的原型对象。
这个属性是proto -
简单说, 每个实例中, 其实也会有一个属性, 该属性是指向原型对象的.
1.jpg
上面的图解析了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系
- Person.prototype指向原型对象, 而Person.prototype.constructor又指回了Person.
- 原型对象中除了包含constructor属性之外，还包括后来添加的其他属性。
- Person的每个实例——personl和person2都包含一个内部属性proto，该属性也指向原型对象；
可以通过proto来修改原型的值(通常不会这样修改, 知道即可)
person1修改了name后, person2也会修改:
person1.sayHello() // Coderwhy
person2.sayHello() // Coderwhy
person1.__proto__.name = "Kobe"
person1.sayHello() // Kobe
person2.sayHello() // Kobe
但是要注意下面的情况:
当我们给person1.name进行赋值时, 其实在给person1实例添加一个name属性.
这个时候再次访问时, 就不会访问原型中的name属性了.
创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。
构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。
结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。
另外，这种混成模式还支持向构造函数传递参数；可谓是集两种模式之长。
// 创建Person构造函数
function Person(name, age, height) {
this.name = name
this.age = age
this.height = height
this.hobby = ["Basketball", "Football"]
}
// 重新Peron的原型对象
Person.prototype = {
constructor: Person,
sayHello: function () {
alert("Hello JavaScript")
}
}
// 创建对象
var person1 = new Person("Coderwhy", 18, 1.88)
var person2 = new Person("Kobe", 30, 1.98)
// 测试是否共享了函数
alert(person1.sayHello == person2.sayHello) // true
// 测试引用类型是否存在问题
person1.hobby.push("tennis")
alert(person1.hobby)
alert(person2.hobby)
思考如下情况:
- 我们知道, 可以通过Person.prototype = {}的方式来重写原型对象.
- 假如, 我们后面赋值的不是一个{}, 而是另外一个类型的实例, 结果会是怎么样呢?
- 显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。
- 假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。
// 1.创建Animal的构造函数
function Animal() {
this.animalProperty = "Animal"
}
// 2.给Animal的原型中添加一个方法
Animal.prototype.animalFunction = function () {
alert(this.animalProperty)
}
// 3.创建Person的构造函数
function Person() {
this.personProperty = "Person"
}
// 4.给Person的原型对象重新赋值
Person.prototype = new Animal()
// 5.给Person添加属于自己的方法
Person.prototype.personFunction = function () {
alert(this.personProperty)
}
// 6.创建Person的实例
var person = new Person()
person.animalFunction()
person.personFunction()
- 重点我们来看第4步代码: 给Person.prototype赋值了一个Animal的实例. 也就是Person的原型变成了Animal的实例.
- Animal实例本身有一个proto可以指向Animal的原型.
那么, 我们来思考一个问题: 如果现在搜索一个属性或者方法, 这个时候会按照什么顺序搜索呢? - 第一步, 在person实例中搜索, 搜索到直接返回或者调用函数. 如果没有执行第二步.
- 第二步, 在Person的原型中搜索, Person的原型是谁? Animal的实例. 所以会在Animal的实例中搜索, 无论是属性还是方法, 如果搜索到则直接返回或者执行. 如果没有, 执行第三步.
- 第三步, 在Animal的原型中搜索, 搜索到返回或者执行, 如果没有, 搜索结束. (当然其实还有Object, 但是先不考虑)
原型链简单总结:
- 通过实现原型链，本质上扩展了本章前面介绍的原型搜索机制。
- 当以读取模式访问一个实例属性时，首先会在实例中搜索该属性。如果没有找到该属性，则会继续搜索实例的原型。在通过原型链实现继承的情况下，搜索过程就得以沿着原型链继续向上。
- 在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。
instanceof操作符：
// instanceof
alert(person instanceof Object) // true
alert(person instanceof Animal) // true
alert(person instanceof Person) // true
isPrototypeOf()函数
// isPrototypeOf函数
alert("isPrototypeOf函数函数")
alert(Object.prototype.isPrototypeOf(person)) // true
alert(Animal.prototype.isPrototypeOf(person)) // true
alert(Person.prototype.isPrototypeOf(person)) // true
原型链存在的问题:
- 原型链存在最大的问题是关于引用类型的属性.
- 通过上面的原型实现了继承后, 子类的person对象继承了(可以访问)Animal实例中的属性(animalProperty).
但是如果这个属性是一个引用类型(比如数组或者其他引用类型), 就会出现问题.
// 1.定义Animal的构造函数
function Animal() {
this.colors = ["red", "green"]
}
// 2.给Animal添加方法
Animal.prototype.animalFunction = function () {
alert(this.colors)
}
// 3.定义Person的构造函数
function Person() {
this.personProperty = "Person"
}
// 4.给Person赋值新的原型对象
Person.prototype = new Animal()
// 5.给Person添加方法
Person.prototype.personFunction = function () {
alert(this.personProperty)
}
// 6.创建Person对象, 并且调用方法
var person1 = new Person()
var person2 = new Person()
alert(person1.colors) // red,green
alert(person2.colors) // red,green
person1.colors.push("blue")
alert(person1.colors) // red,green,blue
alert(person2.colors) // red,green,blue
我们查看第6步的操作
- 创建了两个对象, 并且查看了它们的colors属性
- 修改了person1中的colors属性, 添加了一个新的颜色blue
- 再次查看两个对象的colors属性, 会发现person2的colors属性也发生了变化
- 两个实例应该是相互独立的, 这样的变化如果我们不制止将会在代码中引发一些列问题.
原型链的其他问题:
在创建子类型的实例时，不能向父类型的构造函数中传递参数。 - 实际上，应该说是没有办法在不影响所有对象实例的情况下，给父类型的构造函数传递参数。
- 从而可以修改父类型中属性的值, 在创建构造函数的时候就确定一个值.
解决方法通过继承的方式。
1.经典继承 2.组合继承 3.原型式继承 4.寄生式继承 5.组合寄生式继承（最终解决方案）
经典继承的做法非常简单: 在子类型构造函数的内部调用父类型构造函数.
- 因为函数可以在任意的时刻被调用
- 因此通过apply()和call()方法也可以在新创建的对象上执行构造函数.
// 创建Animal的构造函数
function Animal() {
this.colors = ["red", "green"]
}
// 创建Person的构造函数
function Person() {
// 继承Animal的属性
Animal.call(this)
// 给自己的属性赋值
this.name = "Coderwhy"
}
// 创建Person对象
var person1 = new Person()
var person2 = new Person()
alert(person1.colors) // red,greem
alert(person2.colors) // red,greem
person1.colors.push("blue")
alert(person1.colors) // red,green,blue
alert(person2.colors) // red,green
代码解析:
- 我们通过在Person构造函数中, 使用call函数, 将this传递进去.
- 这个时候, 当Animal中有相关属性初始化时, 就会在this对象上进行初始化操作.
- 这样就实现了类似于继承Animal属性的效果.
存在问题
- 对于经典继承理解比较深入, 你已经能发现: 经典继承只有属性的继承, 无法实现方法的继承.
- 因为调用call函数, 将this传递进去, 只能将父构造函数中的属性初始化到this中.
- 但是如果函数存在于父构造函数的原型对象中, this中是不会有对应的方法的.
回顾原型链和经典继承: - 原型链存在的问题是引用类型问题和无法传递参数, 但是方法可以被继承
- 经典继承是引用类型没有问题, 也可以传递参数, 但是方法无法被继承.
怎么办呢? 将两者结合起来怎么样?
- 组合继承就是发挥原型链和经典继承各自的优点来完成继承的实现.
- 使用原型链实现对原型属性和方法的继承.
- 通过经典继承实现对实例属性的继承, 以及可以在构造函数中传递参数.
// 1.创建构造函数的阶段
// 1.1.创建Animal的构造函数
function Animal(age) {
this.age = age
this.colors = ["red", "green"]
}
// 1.2.给Animal添加方法
Animal.prototype.animalFunction = function () {
alert("Hello Animal")
}
// 1.3.创建Person的构造函数
function Person(name, age) {
Animal.call(this, age)
this.name = name
}
// 1.4.给Person的原型对象重新赋值
Person.prototype = new Animal(0)
// 1.5.给Person添加方法
Person.prototype.personFunction = function () {
alert("Hello Person")
}
// 2.验证和使用的代码
// 2.1.创建Person对象
var person1 = new Person("Coderwhy", 18)
var person2 = new Person("Kobe", 30)
// 2.2.验证属性
alert(person1.name + "-" + person1.age) // Coderwhy,18
alert(person2.name + "-" + person2.age) // Kobe,30
// 2.3.验证方法的调用
person1.animalFunction() // Hello Animal
person1.personFunction() // Hello Person
// 2.4.验证引用属性的问题
person1.colors.push("blue")
alert(person1.colors) // red,green,blue
alert(person2.colors) // red,green
组合继承存在什么问题呢?
- 组合继承最大的问题就是无论在什么情况下, 都会调用两次父类构造函数.
一次在创建子类原型的时候
另一次在子类构造函数内部(也就是每次创建子类实例的时候). - 另外, 所有的子类实例事实上会拥有两份父类的属性
一份在当前的实例自己里面(也就是person本身的), 另一份在子类对应的原型对象中(也就是person.proto里面)
当然, 这两份属性我们无需担心访问出现问题, 因为默认一定是访问实例本身这一部分的.
原型式继承的核心函数:
// 封装object()函数
function object(o) {
function F() {}
F.prototype = o
return new F()
}
代码解析:
在object()函数内部, 先创建一个临时的构造函数.
然后将传递的对象作为这个构造函数的原型
最后返回了这个临时类型的一个新的实例.
事实上, object()对传入的对象执行了一次浅复制.
// 定义object函数
function object(o) {
function F() {}
F.prototype = o
return new F()
}
// 定义寄生式核心函数
function inhreitPrototype(subType, superType) {
var prototype = object(superType.prototype)
prototype.constructor = subType
subType.prototype = prototype
}
// 定义Animal构造函数
function Animal(age) {
this.age = age
this.colors = ["red", "green"]
}
// 给Animal添加方法
Animal.prototype.animalFunction = function () {
alert("Hello Animal")
}
// 定义Person构造函数
function Person(name, age) {
Animal.call(this, age)
this.name = name
}
// 使用寄生组合式核心函数
inhreitPrototype(Person, Animal)
// 给Person添加方法
Person.prototype.personFunction = function () {
alert("Hello Person")
}