js A函数继承B函数的4种方法

最新推荐文章于 2023-04-09 20:46:11 发布

原创最新推荐文章于 2023-04-09 20:46:11 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

js设计模式专栏收录该内容

21 篇文章

订阅专栏

博客介绍了JavaScript中四种原型继承方法。方法一是直接prototype等号赋值，但存在地址相同问题；方法二是B.prototype = new A({})，会将函数与声明变量都赋值；方法三结合前两者优点；方法四遍历需继承方法的prototype，但无法继承.prototype.prototype。

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

方法一： (直接prototype等号赋值，缺点：地址相同)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js函数继承</title>
</head>
<body>
  <script>
	//本继承函数p1
    function p1(opt){
        this.name = opt.name
        this.age = opt.age
    }
    //p1的函数方法
    p1.prototype.sayName = function(){
        console.log(this.name)
    }        
    /********下面方法是 p2继承p1的变量 ******/
    function p2(opt){
        p1.call(this,opt)   //继承p1的属性 如果不需要继承属性可以不写
        this.sex = opt.sex  //p2自己的属性
    }

    /*********下面方法是 P2继承p1的函数 ******/
    //方法1 (直接等则prototype地址相同)
    p2.prototype = p1.prototype
	//只能在prototype相等的下面添加p1自己的方法 这样不会被覆盖
    p2.prototype.sayAge = function(){
        console.log(this.age)
    }
    //实例化p2
    const o2=new p2({
        name:"蜘蛛侠",
        age:"19",
        sex:"man"
    })
    console.log(o2)	//输出p2
  </script>
</body>
</html>

方法一运行结果如下：

在这里插入图片描述

方法二： (B.prototype = new A({}) 缺点：函数与声明的变量都赋值了)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js函数继承</title>
</head>
<body>
  <script>
	//本继承函数p1
    function p1(opt){
        this.name = opt.name
        this.age = opt.age
    }
    //p1的函数方法
    p1.prototype.sayName = function(){
        console.log(this.name)
    }        
    /********下面方法是 p2继承p1的变量 ******/
    function p2(opt){
        p1.call(this,opt)   //继承p1的属性 如果不需要继承属性可以不写
        this.sex = opt.sex  //p2自己的属性
    }

    /*********下面方法是 P2继承p1的函数 ******/
    //方法2 (函数与声明的变量都赋值了)
    p2.prototype = new p1({})
	//只能在prototype相等的下面添加p1自己的方法 这样不会被覆盖
    p2.prototype.sayAge = function(){
        console.log(this.age)
    }
    //实例化p2
    const o2=new p2({
        name:"蜘蛛侠",
        age:"19",
        sex:"man"
    })
    console.log(o2)	//输出p2
  </script>
</body>
</html>

方法二运行结果如下：

在这里插入图片描述

方法三： (方法1与2的结合，既不地址相同也不继承不需要的属性)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js函数继承</title>
</head>
<body>
  <script>
	//本继承函数p1
    function p1(opt){
        this.name = opt.name
        this.age = opt.age
    }
    //p1的函数方法
    p1.prototype.sayName = function(){
        console.log(this.name)
    }        
    /********下面方法是 p2继承p1的变量 ******/
    function p2(opt){
        p1.call(this,opt)   //继承p1的属性 如果不需要继承属性可以不写
        this.sex = opt.sex  //p2自己的属性
    }

    /*********下面方法是 P2继承p1的函数 ******/
    //方法三 (方法1与2的结合，既不地址相同 也不继承不需要的属性)
    function c(){}	//声明一个第三容器存放prototype
    c.prototype = p1.prototype  //此时地址相同
    p2.prototype = new c()      //实例化后地址不同
	//只能在prototype相等的下面添加p1自己的方法 这样不会被覆盖
    p2.prototype.sayAge = function(){
        console.log(this.age)
    }
    //实例化p2
    const o2=new p2({
        name:"蜘蛛侠",
        age:"19",
        sex:"man"
    })
    console.log(o2)	//输出p2
  </script>
</body>
</html>

方法三运行结果如下：

在这里插入图片描述

方法四：(遍历需继承方法的prototype即可,但是.prototype.prototype继承不了)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js函数继承</title>
</head>
<body>
  <script>
	//本继承函数p1
    function p1(opt){
        this.name = opt.name
        this.age = opt.age
    }
    //p1的函数方法
    p1.prototype.sayName = function(){
        console.log(this.name)
    }        
    /********下面方法是 p2继承p1的变量 ******/
    function p2(opt){
        p1.call(this,opt)   //继承p1的属性 如果不需要继承属性可以不写
        this.sex = opt.sex  //p2自己的属性
    }

    /*********下面方法是 P2继承p1的函数 ******/
    //方法4 (遍历即可 但是.prototype.prototype继承不了)
    for(var key in p1.prototype){
        p2.prototype[key] = p1.prototype[key]
    }

    p2.prototype.sayAge = function(){
        console.log(this.age)
    }
    //实例化p2
    const o2=new p2({
        name:"蜘蛛侠",
        age:"19",
        sex:"man"
    })
    console.log(o2)	//输出p2
  </script>
</body>
</html>