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

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


<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>

方法一 运行结果如下:

js A函数继承B函数的4种方法_第1张图片

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


<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>

方法二 运行结果如下:

js A函数继承B函数的4种方法_第2张图片

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


<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>

方法三 运行结果如下:

js A函数继承B函数的4种方法_第3张图片

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


<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>

方法四 运行结果如下:

js A函数继承B函数的4种方法_第4张图片

你可能感兴趣的:(js设计模式)