资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JS篇 - js的继承

JS篇 - js的继承

kun_jian / 1794人阅读

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

定义

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

先来个父类祭天 
</>复制代码 
  1.   function Animal(name) {
  2.     this.name = name || "animal";
  3.     this.speak = function () {
  4.       console.log("speak");
  5.     }
  6.   }
  7.   Animal.prototype.move = function () {
  8.     console.log("move");
  9.   }
原型链继承 
</>复制代码 
  1.   function Cat() {
  2.     this.getName = function () {
  3.       console.log(this.name);
  4.     };
  5.   }
  6.   Cat.prototype = new Animal("cat1");
  7.   var cat = new Cat();
  8.   cat.name = "cat2";
  9.   console.log(cat);//该实例对象有一个name为cat2，原型上有一个name是cat1
  10.   cat.getName();//cat2（先找当前属性，再找原型）
  11.   console.log(cat instanceof Cat);//true
  12.   console.log(cat instanceof Animal);//true
</>复制代码 
  1. 父子之间存在关系，但子类并不会创建新的属性，set子类属性并不会覆盖原型上的属性，get属性只不过是根据先读取当前属性再读取原型的优先级
构造函数继承 
</>复制代码 
  1.   function Dog(name) {
  2.     Animal.call(this);
  3.     this.name = name || "doggy";
  4.   }
  5.   var dog = new Dog();
  6.   console.log(dog);//只有子类属性
  7.   console.log(dog instanceof Dog); // true
  8.   console.log(dog instanceof Animal); // false
</>复制代码 
  1. 实际上只是利用父类构造函数来添加子类属性，父子之间没有什么关系
ES6继承（完美继承） 
</>复制代码 
  1.   class Animal2 {
  2.     constructor(name) {
  3.       this.name = name || "animal2";
  4.       this.speak = function () {
  5.         console.log("speak");
  6.       }
  7.     }
  8.   }
  9.   Animal2.prototype.move = function () {
  10.     console.log("move");
  11.   }
  12.   var animal2 = new Animal2("god2");
  13.   console.log(animal2);
  14.   class Bird extends Animal2 {
  15.     getName() {
  16.       console.log(this.name);
  17.     }
  18.   }
  19.   var bird = new Bird("bird");
  20.   console.log(bird);//既有父类的属性，原型链也指向父类
  21.   bird.getName();
  22.   console.log(bird instanceof Bird); // true
  23.   console.log(bird instanceof Animal2); // true
GPU云服务器 云服务器 js原型链的继承 js继承的几种方式 js 继承 js继承

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

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

相关文章

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

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

    jzzlee 评论0 收藏0

  • javascript基础篇：关于js面向对象的理解

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

    roadtogeek 评论0 收藏0

  • javascript基础篇：关于js面向对象的理解

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

    newtrek 评论0 收藏0

发表评论

登陆后可评论

0条评论

kun_jian

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<