js继承原理

2020-10-21 20:02:52 阅读：139 来源： 互联网

标签：name 继承 js Person 原型 Student 原理构造函数

每个构造函数都有一个原型对象，原型对象中都包含一个指向构造函数的指针，而实
例都包含一个指向原型对象的内部指针。当原型对象等于另外一个类型的实例即继承。

function Person (){
      this.name = "张三"
      this.age = 11
}      // 定义一个构造函数
var person = new Person() // 生成一个实例

如图是一个简单的原型，之后我们可以创建一个构造函数进行继承操作

function Student (ID){
      this.shool = 'XX'
      this.shoolID = ID

我们想让这个 Student 继承 Person 里的属性和方法，也就是说改变 Student 构造函数的的指向，让其指向一个新的原型，且这个原型内需要有 Person 的属性和方法。
因此，可以让 Student 的原型指向 Person 的一个实例，

Student.prototype = person

但 Student 的新原型的构造函数此时并没有指向 Student ,因此，需要下一步操作

Student.prototype.constructor = Students 
/* 上面两步可以简写为
 * Student.prototype = new Person()
 * Student.prototype.constructor = Students
*/

最后，变为如图所示

此时，可以从图中看到，Student 的原型对象此时已为 Person 的实例 person，而 person 又可以使用 Person 里的属性和方法，因此实现继承

var student = new Student(0001) // 创建一个 Student 的实例进行检验
console.log(student.name) // 为张三

但这种方法就和 js 里的原型模式一样有一些弊端，定义内容初始化为公共，及所有属性和方法都共享。
所以，在实际使用继承时，一般为原型链继承和经典继承混合使用。（就像创建对象的组合模式一样）
那么什么是经典继承呢？
经典继承其实就是是通过 call() 方法实现的，实际上就是在子类构造函数的内部调用超类构造函数
接下来我们看一个实际例子

// 经典继承
        function Animal (name){
            this.name = name
            this.age = 4
        }
        function Dog (name){
            Animal.call(this, name) // 即在 dog 的环境中执行 Animal，此时 this 即为dog,dog 的名字和年龄也已生成，实现了继承
        }
        var dog = new Dog('huhu')
        console.log(dog.age) // 4

在实际应用中，一般将上面两者组合起来使用，经典继承用来继承私有的属性和方法，原型链继承则用来继承公用的属性和方法

        // 组合模式创造对象
        function Food (name, taste){
            this.name = name
            this.taste = taste
        }
        Food.prototype.show = function (){
            console.log('食物是可以吃的')
        }
        // 组合继承
        function Fruit (name, taste, color){
            // 经典继承
            Food.call(this, name, taste)
            this.color = color
        }
        // 原型链继承
        Fruit.prototype = new Food()
        Fruit.prototype.constructor = Fruit
        var apple = new Fruit('apple', 'sweet', 'red')
        console.log(apple.show())

标签：name,继承,js,Person,原型,Student,原理,构造函数
来源： https://www.cnblogs.com/tonedog/p/13852746.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js继承原理