浅析JS原型继承与类的继承_基础知识-js教程-PHP中文网

首页

web前端

js教程

浅析JS原型继承与类的继承_基础知识

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:06 PM

js 类继承

我们先看JS类的继承

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
    <title>JS类的继承</title>
</head>

<body>
  /* -- 类式继承 -- */
  <script type="text/javascript">
  //先声明一个超类
  var Animal = function(name) {
      this.name = name;
    }
    //给这个超类的原型对象上添加方法
  Animal.prototype.Eat = function() {
    console.log(this.name + " Eat");
  };
  //实例化这个超
  var a = new Animal("Animal");

  //再创建构造函数对象类
  var Cat = function(name, sex) {
      //这个类中要调用超类Animal的构造函数，并将参数name传给它
      Animal.call(this, name);
      this.sex = sex;
    }
    //这个子类的原型对象等于超类的实例
  Cat.prototype = new Animal();
  //因为子类的原型对象等于超类的实例，所以prototype.constructor这个方法也等于超类构造函数

  console.log(Cat.prototype.constructor);
  //这个是Animal超类的引用，所以要从新赋值为自己本身
  Cat.prototype.constructor = Cat;
  console.log(Cat.prototype.constructor);
  //子类本身添加了getSex 方法
  Cat.prototype.getSex = function() {
      return this.sex;
    }
    //实例化这个子类
  var _m = new Cat('cat', 'male');
  //自身的方法
  console.log(_m.getSex()); //male
  //继承超类的方法
  console.log(_m.Eat()); //cat
  </script>
</body>

</html>

登录后复制

我们再看JS原型继承

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>JS原型继承</title>
</head>

<body>
  <!--原型继承-->
  <script type="text/javascript">
  //clone()函数用来创建新的类Person对象
  var clone = function(obj) {
    var _f = function() {};
    //这句是原型式继承最核心的地方，函数的原型对象为对象字面量
    _f.prototype = obj;
    return new _f;
  }

  //先声明一个对象字面量
  var Animal = {
      somthing: 'apple',
      eat: function() {
        console.log("eat " + this.somthing);
      }
    }
    //不需要定义一个Person的子类，只要执行一次克隆即可
  var Cat = clone(Animal);
  //可以直接获得Person提供的默认值，也可以添加或者修改属性和方法
  console.log(Cat.eat());
  Cat.somthing = 'orange';
  console.log(Cat.eat());

  //声明子类,执行一次克隆即可
  var Someone = clone(Cat);
  </script>
</body>

</html>

登录后复制

我们可以试验一下，JS类的继承 children.constructor==father 返回的是true，而原型继承children.constructor==father 返回的是false;

以上这篇浅析JS原型继承与类的继承就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1659

CakePHP 教程

1416

Laravel 教程

1310

PHP教程

1258

C# 教程

1232

显示更多

Related knowledge

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

C++ 函数继承详解：如何在继承中使用'基类指针”和'派生类指针”？ May 01, 2024 pm 10:27 PM

在函数继承中，使用“基类指针”和“派生类指针”来理解继承机制：基类指针指向派生类对象时，执行向上转型，只访问基类成员。派生类指针指向基类对象时，执行向下转型（不安全），必须谨慎使用。

C++ 函数继承详解：如何调试继承中出现的错误？ May 02, 2024 am 09:54 AM

继承错误调试技巧：确保正确的继承关系。使用调试器逐步执行代码，检查变量值。确保正确使用virtual修饰符。检查隐藏的继承带来的菱形继承问题。检查抽象类中未实现的纯虚函数。

js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系：1、JS作为Web开发基石；2、Vue.js作为前端框架的崛起；3、JS与Vue的互补关系；4、JS与Vue的实践应用。

C++ 函数继承详解：如何理解继承中的'is-a”和'has-a”关系？ May 02, 2024 am 08:18 AM

C++函数继承详解：掌握“is-a”和“has-a”关系什么是函数继承？函数继承是C++中一种将派生类中定义的方法与基类中定义的方法关联起来的技术。它允许派生类访问和重写基类的方法，从而扩展了基类的功能。“is-a”和“has-a”关系在函数继承中，“is-a”关系指派生类是基类的子类型，也就是说，派生类“继承”了基类的特性和行为。“has-a”关系指派生类包含对基类对象的引用或指针，也就是说，派生类“拥有”了基类对象。语法以下是如何实现函数继承的语法：classDerivedClass:pu

C++ 中继承和多态性如何影响类的耦合度？ Jun 05, 2024 pm 02:33 PM

继承和多态性会影响类的耦合度：继承会增加耦合度，因为派生类依赖于基类。多态性可以降低耦合度，因为对象可以通过虚函数和基类指针以一致的方式响应消息。最佳实践包括谨慎使用继承、定义公共接口、避免向基类添加数据成员，以及通过依赖注入解耦类。实战案例展示了如何使用多态性和依赖注入降低银行账户应用程序中的耦合度。

'PHP面向对象编程入门：从概念到实践” Feb 25, 2024 pm 09:04 PM

什么是面向对象编程？面向对象编程（OOP）是一种编程范式，它将现实世界中的实体抽象为类，并使用对象来表示这些实体。类定义了对象的属性和行为，而对象则实例化了类。OOP的主要优点在于它可以使代码更易于理解、维护和重用。OOP的基本概念OOP的主要概念包括类、对象、属性和方法。类是对象的蓝图，它定义了对象的属性和行为。对象是类的实例，它具有类的所有属性和行为。属性是对象的特征，它可以存储数据。方法是对象的函数，它可以对对象的数据进行操作。OOP的优点OOP的主要优点包括：可重用性：OOP可以使代码更