JS篇 - js的继承

kun_jian 发布于2019-08-26 13:48 / 1706人阅读

摘要：定义汉语解释泛指把前人的作风文化知识等接受过来计算机术语解释继承可以使得子类具有父类的属性和方法或者重新定义追加属性和方法等先来个父类祭天原型链继承该实例对象有一个为，原型上有一个是先找当前属性，再找原型父子之间存在关系，但子类并不会创建新

定义

汉语解释：泛指把前人的作风、文化、知识等接受过来
计算机术语解释：继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等

先来个父类祭天

  function Animal(name) {
    this.name = name || "animal";
    this.speak = function () {
      console.log("speak");
    }
  }
  Animal.prototype.move = function () {
    console.log("move");
  }

原型链继承

  function Cat() {
    this.getName = function () {
      console.log(this.name);
    };
  }

  Cat.prototype = new Animal("cat1");
  var cat = new Cat();
  cat.name = "cat2";
  console.log(cat);//该实例对象有一个name为cat2，原型上有一个name是cat1
  cat.getName();//cat2（先找当前属性，再找原型）
  console.log(cat instanceof Cat);//true
  console.log(cat instanceof Animal);//true

父子之间存在关系，但子类并不会创建新的属性，set子类属性并不会覆盖原型上的属性，get属性只不过是根据先读取当前属性再读取原型的优先级

构造函数继承

  function Dog(name) {
    Animal.call(this);
    this.name = name || "doggy";
  }

  var dog = new Dog();
  console.log(dog);//只有子类属性
  console.log(dog instanceof Dog); // true
  console.log(dog instanceof Animal); // false

实际上只是利用父类构造函数来添加子类属性，父子之间没有什么关系

ES6继承（完美继承）

  class Animal2 {
    constructor(name) {
      this.name = name || "animal2";
      this.speak = function () {
        console.log("speak");
      }
    }
  }

  Animal2.prototype.move = function () {
    console.log("move");
  }
  var animal2 = new Animal2("god2");
  console.log(animal2);

  class Bird extends Animal2 {
    getName() {
      console.log(this.name);
    }
  }

  var bird = new Bird("bird");
  console.log(bird);//既有父类的属性，原型链也指向父类
  bird.getName();
  console.log(bird instanceof Bird); // true
  console.log(bird instanceof Animal2); // true

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109558.html

体验js之美第八课-面向对象创建和继承终结篇

摘要：概述到这里我们讲说面向对象的系列部分的最后一个课程，面向对象必须掌握两个东西一个是对象的创建一个是继承。只需要记住一句话，属性放在构造函数里面，方法放在原型上。概述到这里我们讲说js面向对象的系列部分的最后一个课程，面向对象必须掌握两个东西一个是对象的创建一个是继承。这节课我们重点说说这两个问题最后我们说下在ES6里面面向对象怎么玩。 1对象的创建我们第一节课已经就会用了，单体模...

jzzlee 2019-08-20 16:09 评论0 收藏0
javascript基础篇：关于js面向对象的理解

摘要：关于中面向对象的理解面向对象编程它是一种编程思想我们的编程或者学习其实是按照类实例来完成的学习类的继承封装多态封装把实现一个功能的代码封装到一个函数中一个类中以后再想实现这个功能，只需要执行这个函数方法即可，不需要再重复的编写代码。关于js中面向对象的理解面向对象编程(oop) 它是一种编程思想 (object-oriented programming ), 我们的编程或者学习其...

roadtogeek 2019-08-23 15:41 评论0 收藏0
javascript基础篇：关于js面向对象的理解

摘要：关于中面向对象的理解面向对象编程它是一种编程思想我们的编程或者学习其实是按照类实例来完成的学习类的继承封装多态封装把实现一个功能的代码封装到一个函数中一个类中以后再想实现这个功能，只需要执行这个函数方法即可，不需要再重复的编写代码。关于js中面向对象的理解面向对象编程(oop) 它是一种编程思想 (object-oriented programming ), 我们的编程或者学习其...

newtrek 2019-08-02 14:25 评论0 收藏0