javascript原型继承基本模式用法及改进方式实例详解-tutorial js-php.cn

javascript原型继承基本模式用法及改进方式实例详解

伊谢尔伦

Lepaskan： 2017-07-27 10:49:58

asal

1256 orang telah melayarinya

在Javascript中，每个函数都有一个原型属性prototype指向自身的原型，而由这个函数创建的对象也有一个__proto__属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个__proto__指向自己的原型，这样逐层深入直到Object对象的原型，这样就形成了原型链。

每个函数都是Function函数创建的对象，所以每个函数也有一个__proto__属性指向Function函数的原型。这里需要指出的是，真正形成原型链的是每个对象的__proto__属性，而不是函数的prototype属性，这是很重要的。

基本模式：

var Parent = function(){
    this.name = &#39;parent&#39; ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(){
    this.name = &#39;child&#39; ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent() ;
var child = new Child() ;
console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child

Salin selepas log masuk

这种是最简单实现原型继承的方法，直接把父类的对象赋值给子类构造函数的原型，这样子类的对象就可以访问到父类以及父类构造函数的prototype中的属性。这种方法的优点很明显，实现十分简单，不需要任何特殊的操作；同时缺点也很明显，如果子类需要做跟父类构造函数中相同的初始化动作，那么就得在子类构造函数中再重复一遍父类中的操作：

var Parent = function(name){
    this.name = name || &#39;parent&#39; ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    this.name = name || &#39;child&#39; ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent(&#39;myParent&#39;) ;
var child = new Child(&#39;myChild&#39;) ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

Salin selepas log masuk

上面这种情况还只是需要初始化name属性，如果初始化工作不断增加，这种方式是很不方便的。因此就有了下面一种改进的方式：借用构造函数

var Parent = function(name){
    this.name = name || &#39;parent&#39; ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent(&#39;myParent&#39;) ;
var child = new Child(&#39;myChild&#39;) ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

Salin selepas log masuk

上面这种方法在子类构造函数中通过apply调用父类的构造函数来进行相同的初始化工作，这样不管父类中做了多少初始化工作，子类也可以执行同样的初始化工作。但是上面这种实现还存在一个问题，父类构造函数被执行了两次，一次是在子类构造函数中，一次在赋值子类原型时，这是很多余的，所以我们还需要做一个改进：

var Parent = function(name){
    this.name = name || &#39;parent&#39; ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;
var parent = new Parent(&#39;myParent&#39;) ;
var child = new Child(&#39;myChild&#39;) ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

Salin selepas log masuk

这样我们就只需要在子类构造函数中执行一次父类的构造函数，同时又可以继承父类原型中的属性，这也比较符合原型的初衷，就是把需要复用的内容放在原型中。

Atas ialah kandungan terperinci javascript原型继承基本模式用法及改进方式实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!