js面向对象问题汇总（原型对象原型链）

$\color{red}{创建对象的方法}$

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到底从何而来, 所以你需要特别知道一下这里有这个属性.

使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。解决方式使用原型链,

$\color{red}{原型对象}$

$\color{blue}{基本介绍}$

我们创建的每个函数都有一个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属性了.

$\color{red}{创建对象的方法（续）比较推荐的方法}$

创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。
构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。
结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。
另外，这种混成模式还支持向构造函数传递参数；可谓是集两种模式之长。

// 创建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)

$\color{red}{原型链}$

$\color{blue}{基本使用}$

思考如下情况:

我们知道, 可以通过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, 但是先不考虑)

原型链简单总结:

通过实现原型链，本质上扩展了本章前面介绍的原型搜索机制。
当以读取模式访问一个实例属性时，首先会在实例中搜索该属性。如果没有找到该属性，则会继续搜索实例的原型。在通过原型链实现继承的情况下，搜索过程就得以沿着原型链继续向上。
在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。

$\color{blue}{原型和实例的关系}$

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

$\color{blue}{原型链的问题}$

原型链存在的问题:

原型链存在最大的问题是关于引用类型的属性.
通过上面的原型实现了继承后, 子类的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属性也发生了变化
两个实例应该是相互独立的, 这样的变化如果我们不制止将会在代码中引发一些列问题.
原型链的其他问题:
在创建子类型的实例时，不能向父类型的构造函数中传递参数。
实际上，应该说是没有办法在不影响所有对象实例的情况下，给父类型的构造函数传递参数。
从而可以修改父类型中属性的值, 在创建构造函数的时候就确定一个值.
解决方法通过继承的方式。

$\color{red}{继承的主要方法}$

1.经典继承 2.组合继承 3.原型式继承 4.寄生式继承 5.组合寄生式继承（最终解决方案）

$\color{blue}{借用构造函数--经典继承}$

经典继承的做法非常简单: 在子类型构造函数的内部调用父类型构造函数.

因为函数可以在任意的时刻被调用
因此通过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中是不会有对应的方法的.
回顾原型链和经典继承:
原型链存在的问题是引用类型问题和无法传递参数, 但是方法可以被继承
经典继承是引用类型没有问题, 也可以传递参数, 但是方法无法被继承.
怎么办呢? 将两者结合起来怎么样?

$\color{blue}{组合继承}$

组合继承就是发挥原型链和经典继承各自的优点来完成继承的实现.
使用原型链实现对原型属性和方法的继承.
通过经典继承实现对实例属性的继承, 以及可以在构造函数中传递参数.

// 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里面)
当然, 这两份属性我们无需担心访问出现问题, 因为默认一定是访问实例本身这一部分的.

$\color{blue}{原型式继承}$

原型式继承的核心函数:

// 封装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")
}

最后编辑于：2021.03.01 12:01:37

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 200,392评论 5赞 470
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,258评论 2赞 377
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 147,417评论 0赞 332
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,992评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,930评论 5赞 360
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,199评论 1赞 277
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,652评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,327评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,463评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,382评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,432评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,118评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,704评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,787评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,999评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,476评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,057评论 2赞 341

js面向对象问题汇总（原型对象 原型链）

推荐阅读更多精彩内容

js面向对象问题汇总（原型对象原型链）