Home >Web Front-end >JS Tutorial >A brief analysis of JS prototype inheritance and class inheritance_Basic knowledge

A brief analysis of JS prototype inheritance and class inheritance_Basic knowledge

WBOYOriginal: 2016-05-16 15:06:081619browse

Let’s look at the inheritance of JS classes first

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

Let’s look at JS prototypal inheritance

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

We can try it out. JS class inheritance children.constructor==father returns true, while prototypal inheritance children.constructor==father returns false;

The above brief analysis of JS prototype inheritance and class inheritance is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home more.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JQuery navigation menu selection effects_jqueryNext article：JQuery navigation menu selection effects_jquery

See more

A brief analysis of JS prototype inheritance and class inheritance_Basic knowledge

Related articles