JavaScript高级：构造函数与原型

JavaScript 高级 - 第3天

了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作的封装。

• 了解面向对象编程的一般特征
• 掌握基于构造函数原型对象的逻辑封装
• 掌握基于原型对象实现的继承
• 理解什么原型链及其作用
• 能够处理程序异常提升程序执行的健壮性

编程思想

学习 JavaScript 中基于原型的面向对象编程序的语法实现，理解面向对象编程的特征。

面向过程编程

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

举个例子：蛋炒饭

简单来说，面向过程就是按照我们分析好的步骤，按照步骤解决问题。

面向对象编程（oop）

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。总之，面向对象是以对象功能来划分问题，而不是步骤。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

• 封装性
• 继承性
• 多态性

面向过程和面向对象的对比

对比其他语言，前端更多是面向过程的。

构造函数

封装是面向对象思想中比较重要的一部分，JS面向对象可以通过构造函数实现的封装。

同样的将变量和函数组合到了一起并能通过this实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。

对比以下通过面向对象的构造函数实现的封装：

<script>// 构造函数 将公共的属性和方法封装到构造函数中functionPerson(){this.name=namethis.age=agethis.sing=()=>{console.log('我会唱歌')}}// 实例对象 获得了构造函数中封装的所有逻辑letp1=newPerson('小明',25)letp2=newPerson('小红',22)// 对象彼此独立 互不影响console.log(p1===p2)// false</script>

前面我们学过的构造函数方法很好用，但是存在浪费内存的问题：

<script>// 构造函数 将公共的属性和方法封装到构造函数中functionPerson(){this.name=namethis.age=agethis.sing=()=>{console.log('我会唱歌')}}// 实例对象 获得了构造函数中封装的所有逻辑letp1=newPerson('小明',25)letp2=newPerson('小红',22)// 对象彼此独立 互不影响console.log(p1===p2)// false// 两个对象指向堆中的地址不同 因此不是一个sing方法console.log(p1.sing===p2.sing)// false// 但这两个对象中的sing方法内容是完全相同的 这意味着我们多开了一个空间再次存放sing方法 这就导致了内存的浪费</script>

示意图：

总结：

1. 构造函数体现了面向对象的封装特性
2. 构造函数实例创建的对象彼此独立、互不影响

原型

原型对象

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以我们也称为原型对象。

<script>function Person() { this.name = name } // 每个构造函数都有 prototype 属性 console.log(Person.prototype) // 原型对象 Object </script

这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存。

我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。我们还是以上面的例子来演示：

<script>// 公共的属性写到构造函数里functionPerson(){this.name=namethis.age=age}// 公共的方法写到原型对象上 相当于给原型对象添加新方法Person.prototype.sing=function(){console.log('我会唱歌')}letldh=newPerson('刘德华',55)letzxy=newPerson('张学友',58)ldh.sing()// 调用 因为是ldh调用 因此sing的this指向ldhzxy.sing()// 调用console.log(ldh.sing===zxy.sing)// true</script>

构造函数和原型对象中的this都指向实例化的对象。

示意图：

了解了 JavaScript 中构造函数与原型对象的关系后，再来看原型对象具体的作用，如下代码所示：

<script>// 自定义两个数组扩展方法 求和 最大值// 1. 我们定义的这个方法，任何一个数组实例对象都可以使用// 2. 自定义的方法写到 数组.prototype 身上// 最大值 这里不推荐用箭头函数 因为箭头函数没有 thisArray.prototype.max=function(){// 不需要传参 因为原型对象 this 指向调用者 即 arr// 但是 Math.max() 的参数不能是数组 因此我们需要使用展开运算符展开数组// 相当于 Math.max(1, 2, 3)this.Math.max(...this)}// 实例化constarr=[1,2,3]// 相当于 const arr = new Array(1, 2, 3)arr.max()// 调用console.log(arr.max())// 3// 求和Array.prototype.sum()=function(){returnthis.reduce((prev,item)=>prev+item,0)}console.log(arr.sum())// 6</script>

如果构造函数Person中定义和原型对象一样的方法，会发生什么呢：

<script>functionPerson(){// 此处定义同名方法 sayHithis.sayHi=function(){console.log('嗨!');}}// 为构造函数的原型对象添加方法Person.prototype.sayHi=function(){console.log('Hi~');}letp1=newPerson();p1.sayHi();// 输出结果为 嗨!</script>

构造函数Person中定义与原型对象中相同名称的方法，这时实例对象调用则是构造函中的方法sayHi。

通过以上简单示例不难发现 JavaScript 中对象的工作机制：当访问对象的属性或方法时，先在当前实例对象是查找，然后再去原型对象查找，并且原型对象被所有实例共享。

<script>functionPerson(){// 此处定义同名方法 sayHithis.sayHi=function(){console.log('嗨!'+this.name)}}// 为构造函数的原型对象添加方法Person.prototype.sayHi=function(){console.log('Hi~'+this.name)}// 在构造函数的原型对象上添加属性Person.prototype.name='小明'letp1=newPerson()p1.sayHi();// 输出结果为 嗨!letp2=newPerson()p2.sayHi()</script>

总结：结合构造函数原型的特征，实际开发重往往会将封装的功能函数添加到原型对象中。

constructor 属性

每个原型对象prototype里面都有个constructor属性（constructor就是构造函数的意思）。

作用：该属性指向该原型对象的构造函数。简单来说，constructor就是原型对象用来找到爸爸的。

<script>// 构造函数 constructorfunctionStar(){}console.log(Star.prototype)// 原型对象中包含 constructorconstldh=newStar()console.log(Star.prototype.constructor===Star)// true</script>

使用场景：

如果有多个对象的方法，一个一个添加的方式太麻烦了，我们可以给原型对象采取对象形式赋值。

<script>functionStar(){}console.log(Star.prototype)// 此时还包含 constructor// 采用对象形式赋值 会覆盖原来的 prototype 对象// 那么就没有了 constructorStar.prototype={sing:function(){console.log('唱歌')},dance:function(){console.log('跳舞')},}console.log(Star.prototype)// 新增 sing dance 方法 但不包含 constructor</script>

但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函数了，那么，原型对象就和普通的对象没有任何区别了。

为了解决这个问题，我们可以在修改后的原型对象中，添加一个constructor指向原来的构造函数。

<script>functionStar(){}Star.prototype={// 重新指回创造这个原型对象的 构造函数constructor:Star,sing:function(){console.log('唱歌')},dance:function(){console.log('跳舞')},}console.log(Star.prototype)// 既有新方法 也包含 constructor</script>

对象原型

构造函数中可以创建实例对象，构造函数还有一个原型对象，一些公共的属性或者方法放到这个原型对象上，但为什么实例对象可以访问原型对象里面的属性和方法呢？

对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。我们到代码中体会一下：

<script>functionStar(){}constldh=newStar()console.log(ldh)// 可以看到实例对象中包含 [[prototype]] 对象// 对象原型__proto__ 指向该构造函数的原型对象console.log(ldh.__proto__)// 可以看到这个对象也有 constructorconsole.log(ldh.__proto__===Star.prototype)// 指向prototype// 对象原型里的constructor 指向构造函数 Starconsole.log(ldh.__proto__.constructor===Star)// 指向父亲 Star</script>

简单来说，构造函数是父亲，创建了两个儿子，一个是哥哥（原型对象prototype），一个是弟弟（实例对象），而弟弟也会指向哥哥（通过__proto__）。兄弟俩通过都constructor指向父亲。

注意：

• __proto__是JS非标准属性，因此在浏览器中显示的是[[prototype]]（标准）
• __proto__是只读的，只能获取，不能赋值
• [[prototype]]和__proto__意义相同
• 用来表明当前实例对象指向哪个原型对象prototype
• __proto__对象原型里面也有一个constructor属性，指向创建该实例对象的构造函数

原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。

龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。

我们通过一个例子来体会这个过程：

<body><script>// 构造两个函数functionWoman(){eyes:2,head:1}// 实例对象constred=newWoman()console.log(red)// {eyes: 2, head: 1}functionMan(){eyes:2,head:1}constblue=newMan()console.log(blue)// {eyes: 2, head: 1}</script></body>

可以发现这两个函数拥有相同的属性，那么我们可以把相同的属性封装成一个对象，让两个函数共享这一个对象，节约内存：

<body><script>// 继续抽取 把公共的部分放到原型对象上constPerson={eyes:2,head:1}functionWoman(){}// 通过 原型继承 将公共部分赋值给prototype 注意还要加上constructorWoman.prototype=PersonWoman.prototype.constructor=Woman// 实例对象constred=newWoman()console.log(red)// {eyes: 2, head: 1, constructor: f}functionMan(){}// 通过 原型继承 PersonMan.prototype=PersonMan.prototype.constructor=Manconstblue=newMan()console.log(blue)// {eyes: 2, head: 1, constructor: f}</script></body>

如果此时我们想给Woman增加一个新的方法：

<body><script>// 继续抽取 把公共的部分放到原型对象上constPerson={eyes:2,head:1}functionWoman(){}Woman.prototype=PersonWoman.prototype.constructor=Woman// 给女人新添加一个方法 生孩子Woman.prototype.baby=function(){console.log('宝宝')}// 实例对象constred=newWoman()console.log(Woman.prototype)// 多了 baby 这个方法console.log(red)functionMan(){}// 通过 原型继承 PersonMan.prototype=PersonMan.prototype.constructor=Manconstblue=newMan()console.log(Man.prototype)// 也多了 baby！这和我们的想法矛盾console.log(blue)</script></body>

当我们给Woman增加一个新的方法时，发现Man也被添加了同样的方法。这是因为男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改其中一个构造函数的方法另一方函数也会被影响：

如果想要解决这个问题，我们可以独立出它们赋值的对象，Woman对应Person1，Man对应Person2：

<body><script>constPerson1={eyes:2,head:1}constPerson2={eyes:2,head:1}functionWoman(){}// 分别对应不同的对Woman.prototype=Person1Woman.prototype.constructor=Woman// 给女人新添加一个方法 生孩子Woman.prototype.baby=function(){console.log('宝宝')}// 实例对象constred=newWoman()console.log(Woman.prototype)console.log(red)functionMan(){}// 通过 原型继承 PersonMan.prototype=Person2Man.prototype.constructor=Manconstblue=newMan()console.log(Man.prototype)console.log(blue)</script></body>

但根据我们的封装思想，相同的部分是需要被抽取出来再次封装的，根据我们的需求：结构一样但不是同一个对象。由此，我们想到构造函数。

<body><script>// 构造函数 new 出来的对象 结构一样，但是对象不一样functionPerson(){this.eyes=2this.head=1}functionWoman(){}// 分别对应不同的对Woman.prototype=newPerson()Woman.prototype.constructor=Woman// 给女人新添加一个方法 生孩子Woman.prototype.baby=function(){console.log('宝宝')}// 实例对象constred=newWoman()console.log(Woman.prototype)// 有 babyconsole.log(red)functionMan(){}// 通过 原型继承 PersonMan.prototype=newPerson()Man.prototype.constructor=Manconstblue=newMan()console.log(Man.prototype)// 没有 baby！console.log(blue)</script></body>

这样，两个函数之间可以互不影响地修改自己的属性和方法。

总而言之，原型继承最核心的就是父构造函数和字构造函数之间的继承。

也就是Woman.prototype = new Person().

<script>// 构造函数 new 出来的对象 结构一样，但是对象不一样functionPerson(){this.eyes=2this.head=1}// console.log(new Person)// 女人 构造函数 继承 PersonfunctionWoman(){}// Woman 通过原型来继承 Person// 父构造函数（父类） 子构造函数（子类）// 子类的原型 = new 父类Woman.prototype=newPerson()// {eyes: 2, head: 1}// 指回原来的构造函数Woman.prototype.constructor=Woman// 给女人添加一个方法 生孩子Woman.prototype.baby=function(){console.log('宝贝')}constred=newWoman()console.log(red)// 男人 构造函数 继承 PersonfunctionMan(){}// 通过 原型继承 PersonMan.prototype=newPerson()Man.prototype.constructor=Manconstpink=newMan()console.log(pink)</script>

当然，原型继承也是有一定缺陷的，还有更严格的继承类class。

原型链

当我们构造函数时查看prototype时，会发现prototype也有__proto__：

<body><script>functionPerson(){}constldh=newPerson()console.log(ldh.__proto__===Person.prototype)// trueconsole.log(Person.prototype)// 你会发现 prototype 也有__proto__// 其实每个对象都有一个__proto__</script></body>

对象原型指向的是原型对象，那么prototype.__proto__指向哪个原型对象呢？

我们上面提到，__proto__是指向父类的prototype属性，那么这里的prototype.__proto__也应该是指向prototype的父类。prototype是一个对象，每个对象都有一个父类Object构造函数。如此，prototype.__proto__应该指向的是父类的prototype，也就是Object.prototype.

<body><script>functionPerson(){}constldh=newPerson()console.log(ldh.__proto__===Person.prototype)// trueconsole.log(Person.prototype.__proto__===Object.prototype)// true</script></body>

这时候我们会想到，Object.prototype也是对象，那么Object.prototype.__proto__指向谁呢？

由于Object.prototype没有父类，因此Object.prototype.__proto__指向的是空指针null。

我们可以通过示意图来理解这种关系：

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链。

原型链查找规则：

① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

② 如果没有就查找它的原型（也就是__proto__指向的prototype原型对象，一般原型会存储公共的属性和方法）

③ 如果还没有就查找原型对象的原型（Object的原型对象Object.prototype）

④ 依此类推一直找到 Object 为止（null）

⑤__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

⑥ 可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。简单来说，就是检测某个实例对象是否属于某个构造函数。

<script>functionPerson(){}constldh=newPerson()console.log(ldhinstanceofPerson)// true 属于console.log(ldhinstanceofObject)// trueconsole.log(ldhinstanceofArray)// falseconsole.log([1,2,3]instanceofArray)// trueconsole.log(ArrayinstanceofObject)// true 数组也属于对象 因为数组也能通过构造函数创建出来 一切皆对象</script>