js实现继承的几种方法_js添加行如何继承原有的样式-优快云博客

本文深入探讨了JavaScript中的继承机制，包括通过原型链实现继承及使用call和apply方法实现继承的过程。重点阐述了如何利用原型链继承特定属性与方法，以及call/apply方法如何在不同上下文中实现属性与方法的继承。并通过实例代码演示了具体应用，旨在帮助开发者更好地理解和运用JavaScript的继承特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在js里也像java一样拥有继承，从目前掌握的知识来看，继承有2中方法

通过prototype原型来实现继承
通过call，apply方法来实现继承

个人观点

一、prototype可以继承function A上的成员属性/方法（this)，也可以继承A.prototype原型上的属性/方法。

下面我想让ftn继承show上的所有成员属性/方法，以及show.prototype上的所有属性/方法

var show = function () {
      this .display = function() {
             alert( 'display');
       }
}
function ftn() {}
show.prototype.name = 'stray';
show.prototype.get = function() {
       //具体逻辑
}
ftn.prototype = new show();  //这里new show()才能满足上面要求

而我只想让ftn继承show原型上的所有属性/方法改如何做呢

ftn.prototype = show.prototype; //只需将new show() 改成show.prototype

二、call,apply实现继承

看到call,apply我就想到一个成语，鸠占鹊巢。怎么说呢,就是将自身的this 代替对方的this,占用对方的环境，实现继承

例子

function ftn() {
       show.apply(this);
}
var show = function( ) {
      var get = function() {
             alert( 'stray');
       }
      this.display = function() {
             get();
       }
}

var fn = new ftn();
fn.display();

show.apply(this) 什么意思？就是执行show 方法，侵占show方法里面的环境(get ,display等构成的环境),这是this.display中的this已经变成了ftn的this对象，也就是说给ftn增加了一个成员方法display。

这里占用了show的环境，在执行fn.display()的时候能运行get()方法。打印 stray。

我将上边的例子改写了一下

function ftn() {
      this.name = 'stray';
      show.apply( this );
}
var show = function( ) {
      var temp = this;  //①
       var get = function () {
             alert(temp.name); //②
       }
      this.display = function() {
             get();   //③
       }
}
var fn = new ftn();
fn.display();

先解释一下代码，个人理解可以忽略：

②：这里用alert(this.name)替换如何？由于③处只是普通调用，而不是对象引用，所以这里this不存在。换句话说哪个对象调用get，那么get里面的this代表的是这个对象。

既然行不通，那么我在①的地方定义了一个var temp = this;记录这个this,在局部方法中引用

一样可以输出。

个人理解

好了，从这段代码可以看出，var fn = new ftn()以后就为ftn定义了display方法，而且记录了show上面的环境，在执行fn.display时，结合记录的环境，可以打印 ftn上的name.