JavaScript原型链继承

JavaScript原型链继承教程

JavaScript 中,通过原型链实现 继承,也就是将子类型的原型指向父类型的一个实例 对象 从而实现继承。通过该方法实现的继承的好处是简单且易于实现,并且父类新增原型方法和原型属性,子类都能访问到。

JavaScript原型链继承优缺点

优点

  • 父类新增原型方法/原型属性,子类都能访问到。
  • 简单,易于实现。

缺点

  • 无法实现多继承。
  • 来自原型对象的所有属性被所有实例共享。
  • 创建子类实例时,无法向父类构造函数传参。
  • 要想为子类新增属性和方法,必须要在原型指向之后执行,不能放到构造器中。

JavaScript原型链继承详解

语法

function Object1(attr1, attr2) { this.attr1 = attr1; this.attr2 = attr2; } function Object2(attr3) { this.attr3 = attr3; } Object2.prototype = new Object1();

说明

我们通过将 Object2 的 prototype 设置为了 Object1 对象,从而实现了 Object2 继承了 Object1。

注意

我们如果需要在子类中添加新的方法或者是重写父类的方法时候,切记一定要放到替换原型的语句之后。

案例

原型链实现继承

通过原型链实现继承

<!DOCTYPE html> <html> <head> <title>JavaScript原型链继承</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); function Person(name, age) { this.name = name; this.age = age; this.setName = function(name){ this.name = name; } } Person.prototype.setAge = function (age) { this.age = age; } function Student(score){ this.score = score; this.setScore = function (score) { this.score = score; } } var person = new Person("HaiCoder", 109); Student.prototype = new Person(); // 子类型的原型为父类型的一个实例对象 var student = new Student(100); console.log("Person =", person, "Student =", student); </script> </head> </html>

程序运行后,控制台输出如下:

40_JavaScript继承.png

这种方式实现的本质是通过将子类的原型指向了父类的实例,所以子类的实例就可以通过 __proto__ 访问到 Student.prototype 也就是 Person 的实例。

这样就可以访问到父类的私有方法,然后再通过 __proto__ 指向父类的 prototype 就可以获得到父类原型上的方法。于是做到了将父类的私有、公有方法和属性都当做子类的公有属性。

子类继承父类的属性和方法是将父类的私有属性和公有方法都作为自己的公有属性和方法,我们都知道在操作基本数据类型的时候操作的是值,在操作引用数据类型的时候操作的是地址。

如果说父类的私有属性中有引用类型的属性,那它被子类继承的时候会作为公有属性,这样如果父类有两个子类,那么两个子类在操作同一个属性的时候,就会相互影响。

JavaScript原型链继承总结

在 JavaScript 中,通过原型链实现继承,也就是将子类型的原型指向父类型的一个实例对象从而实现继承。通过该方法实现的继承的好处是简单且易于实现,并且父类新增原型方法和原型属性,子类都能访问到。