ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js继承原理

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

标签: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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有