javascript中五种实现对象继承的方法

最新推荐文章于 2025-05-23 14:41:23 发布

原创最新推荐文章于 2025-05-23 14:41:23 发布 · 871 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了JavaScript中实现对象继承的五种常见模式，包括对象冒充、call方法方式、apply方法方式、原型链方式及混合方式，并通过具体示例展示了每种方式的实现过程。

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

(1) 对象冒充
   <script type="text/javascript">

       //继承第一种方式：对象冒充
       function Parent(username) {
           this.username = username;
           this.sayHello = function() {
               alert(this.username);
           }
       }

       function Child(username, password) {
           //下面三行代码是最关键的代码
           this.method = Parent;
           this.method(username);
           delete this.method;

           this.password = password;

           this.sayWorld = function() {
               alert(this.password);
           }
       }
       var parent = new Parent("zhangsan");
       var child = new Child("lisi","1234");

       parent.sayHello();

       child.sayHello();
       child.sayWorld();
   </script>

(2) call方法方式
   call方法是Function对象中的方法，因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法，
   call方法的第一个参数会被传递给函数中的this,从第二个参数开始，逐一赋值给函数中的参数。

   <script type="text/javascript">
       //继承的第二种实现方式，call方法方式，Function对象中的方法

       function test(str, str2) {
           alert(this.name + ", " + str + ", " + str2);
       }
       var object = new Object();
       object.name = "zhangsan";

       //this.call相当于调用了test函数
       test.call(object, "shengsiyuan", "hello");//将object赋给了this

   </script>

   <script type="text/javascript">
       //使用call方式实现对象的继承

       function Parent(username) {
           this.username = username;

           this.sayHello = function() {
               alert(this.username);
           }
       }

       function Child(username, password) {
           Parent.call(this,username);
           this.password = password;

           this.sayWorld = function() {
               alert(this.password);
           }
       }

       var parent = new Parent("zhangsan");

       var child = new Child("lisi","123");

       parent.sayHello();
       child.sayHello();
       child.sayWorld();
   </script>

(3) apply方法方式
   <script type="text/javascript">
       //使用apply方法实现对象继承

       function Parent(username) {
           this.username = username;
           this.sayHello = function() {
               alert(this.username);
           }
       }

       function Child(username, password) {
           Parent.apply(this, new Array(username));
           //和下面一样
           //Parent.apply(this, [username]);

           this.password = password;

           this.sayWorld = function() {
               alert(this.password);
           }
       }
       var parent = new Parent("zhangsan");
       var child = new Child("lisi", "123");

       parent.sayHello();
       child.sayHello();
       child.sayWorld();

   </script>

(4) 原型链方式
   <script type="text/javascript">

       //使用原型链（prototype chain）方式实现对象继承

       function Parent() {

       }

       Parent.prototype.hello = "hello";
       Parent.prototype.sayHello = function() {
           alert(this.hello);
       }

       function Child() {

       }
       Child.prototype = new Parent();
       Child.prototype.world = "world";
       Child.prototype.sayWorld = function() {
           alert(this.world);
       }
       var child = new Child();
       child.sayHello();
       child.sayWorld();
   </script>
(5) 混合方式（推荐使用）
   <script type="text/javascript">
       //使用混合方式实现对象的继承(推荐使用)

       function Parent(hello) {
           this.hello = hello;
       }

       Parent.prototype.sayHello = function() {
           alert(this.hello);
       }

       function Child(hello,world) {
           Parent.call(this, hello);
           this.world = world;
       }

       Child.prototype = new Parent();

       Child.prototype.sayWorld = function() {
           alert(this.world);
       }

       var child = new Child("hello", "world");
       child.sayHello();
       child.sayWorld();
   </script>