前端继承实现方式

最新推荐文章于 2024-06-05 10:38:29 发布

普罗旺斯_浅笑

最新推荐文章于 2024-06-05 10:38:29 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： js继承前端继承继承 function

本文链接：https://blog.csdn.net/qq_21491877/article/details/88240023

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

和java后端代码一样，前端j也有继承，加js主要有以下几种继承方式：对象冒充，call()方法，apply()方法，原型链继承以及混合方式。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery.js"></script>
   </head>
<body>
   <script>
//继承第一种方式：对象冒充
   function Parent(username){
       this.username = username;
       this.hello = function(){
       alert(this.username);
       }
       }
   function Child(userName,password){
      //通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
       //第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
       //第二步：执行this.method方法，即执行Parent所指向的对象函数
       //第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
      this.method = Parent;
      this.method(userName);
      //delete this.method;
      this.password = password;
      this.world= function(){
          alert(this.password);
      }

   }

/*
//继承第二种方式call()方法
       function Parent(username){
       this.username = username;
       this.hello = function(){
       alert(this.username);
       }
       }
       function Child(username,password){
       Parent.call(this,username);
       this.password = password;
       this.world = function(){
       alert(this.password);
       }
       }*/

   //继承的第三种方式：apply()方法方式

   //apply方法接受2个参数，
   //A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
   //B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数
/*       function Parent(username){
       this.username = username;
       this.hello = function(){
       alert(this.username);
       }
       }
       function Child(username,password){
       Parent.apply(this,new Array(username));
       this.password = password;
       this.world = function(){
       alert(this.password);
       }
       } */
       var parent = new Parent("父类");
       var child = new Child("子类","123456");
       parent.hello();
       child.hello();
       child.world();
   </script>
   </body>
</html>

普罗旺斯_浅笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端继承实现方式

和java后端代码一样，前端j也有继承，加js主要有以下几种继承方式：对象冒充，call()方法，apply()方法，原型链继承以及混合方式。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;...
复制链接

扫一扫