js继承的几种方式

ZY

2021-04-23

2201 3 0

1. 原型链继承

原型链继承:想要继承,就必须要提供父类(继承谁,提供继承的属性)

1//父级 2function Person(name) { //给构造函数添加参数 3 this.name = name; 4 this.age = 10; 5 this.sum = function (){ 6 console.log(this.name) 7 } 8} 9//原型链继承 10function Per() { 11 12} 13Per.prototype = new Person(); //主要 实现继承 14var per1 = new Per(); 15console.log(per1.age); //10

重点:让新实例的原型等于父类的实例 特点:1.实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!) 缺点: 1>新实例无法向父类构造函数参数。 2>父子构造函数的原型对象之间有共享问题

2. 借用构造函数继承

使用call和apply借用其他构造函数的成员, 可以解决给父构造函数传递参数的问题, 但是获取不到父构造函数原型上的成员.也不存在共享问题

1//父级 2function Person(name) { //给构造函数添加参数 3 this.name = name; 4 this.age = 10; 5 this.sum = function (){ 6 console.log(this.name) 7 } 8} 9//子构造函数 10function Per(name) { 11 //使用call借用Person的构造函数 12 Person.call(this,name) 13} 14//测试是否有了Person的成员 15var stn = new Per('我是'); 16stn.sum(); // 我是 17console.log(stn.age)

重点:用.call()和.apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制)) 缺点:1、只能继承父类构造函数的属性。    2、无法实现构造函数的复用。(每次用每次都要重新调用)    3、每个新实例都有父类构造函数的副本,臃肿。 特点:1、只继承了父类构造函数的属性,没有继承父类原型的属性。    2、解决了原型链继承缺点1、2、3。    3、可以继承多个构造函数属性(call多个)。    4、在子实例中可向父实例传参。

3. 组合继承

借用构造函数 + 原型式继承

1//父级 2function Person(name) { //给构造函数添加参数 3 this.name = name; 4 this.age = 10; 5 this.sum = function (){ 6 console.log(this.name) 7 } 8} 9//创建子构造函数 10function Per(name) { 11 Person.call(this,name); //借用构造函数 12} 13Per.prototype = new Person() //继承原型链继承 14var str = new Per('zhao'); 15console.log(str.name); //'zhao' 是继承了Per子构造函数的属性 16console.log(str.age); // 10 是继承了Person父类原型的属性

重点:结合了两种模式的优点,传参和复用 特点:1、可以继承父类原型上的属性,可以传参,可复用。    2、每个新实例引入的构造函数属性是私有的。 缺点:调用了两次父类构造函数(耗内存),子类的构造函数会代替原型上的那个父类构造函数

4. 原型链继承

1//父级 2function Person(name) { //给构造函数添加参数 3 this.name = name; 4 this.age = 10; 5 this.sum = function (){ 6 console.log(this.name) 7 } 8} 9//设置父构建函数的原型 10Person.prototype.fn = function (){ 11 console.log(this.age) 12} 13//构建子构造函数 14function Per() { 15 16} 17//实现继承 18var str = new Person(); //拿到父类的实例 19console.log(str.age); // 10 20str.fn(); 10

重点:用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。 特点:类似于复制一个对象,用函数来包装。 缺点:1、所有实例都会继承原型上的属性。    2、无法实现复用。(新实例属性都是后面添加的)

5. 寄生式继承

1//父级 2function Person(name) { //给构造函数添加参数 3 function fn(){} 4 fn.prototype = name; //继承传入的参数 5 return new fn()//返回函数对象 6} 7var str = new Person(); 8//以上是原型式继承,给原型式继承在套一个壳子传递参数 9function Per(name) { 10 var fn1 = Person(name); 11 fn1.name = "zhao"; 12 return fn1 13} 14var fn3 = Per(str); 15console.log(fn3.name); //返回str对象,继承了str的属性

重点:就是给原型式继承外面套了个壳子。 优点:没有创建自定义类型,因为只是套了个壳子返回对象(这个),这个函数顺理成章就成了创建的新对象。 缺点:没用到原型,无法复用

6. 寄生组合式继承

1function Person(name){ 2 this.name = name; 3 this.hobbies = ['a','b','v'] 4}; 5function student(name,age){ 6 Person.call(this,name); 7 this.age = age; 8} 9//关键的三步 实现继承 10// 使用F空函数当子类和父类的媒介 是为了防止修改子类的原型对象影响到父类的原型对象 11let fn = function (){}; 12fn.prototype = Person.prototype; 13 14student.prototype = new fn(); 15var fn1 = new student('zhao','24') 16console.log(fn1)

组合继承最大的缺点是最调用两次父构造函数 一次是设置子类实例的原型的时候:

 student.prototype = new Person();

一次是在创建子类型实例的时候:

var fn = new student('zhao','24')

7. es6实现继承

1class parents { 2 constructor(){ 3 this.grandmather = 'rose'; 4 this.grandfather = 'jack'; 5 } 6} 7 8class children extends parents{ 9 constructor(mather,father){ 10 //super 关键字,它在这里表示父类的构造函数,用来新建父类的 this 对象。 11 super(); 12 this.mather = mather; 13 this.father = father; 14 } 15} 16 17let child = new children('mama','baba'); 18console.log(child)
点赞
收藏

评论区

加载中...

相关推荐

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

你不可不知的JS面试题(第二期)

1、什么是继承?子类可以使用父类的所有功能,并且对功能进行扩展。新增方法改用方法(1)、ES6使用extends子类继承父类的方法。// 父类    class A        constructor(name)            this.name name;                getNa

JavaScript学习总结(十七)——Javascript原型链的原理

一、JavaScript原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用__proto__属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript会向上遍历原型

JS实现继承的几种方式

前言JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下://定义一个动物类functionAnimal(name){//属性this.name

JS必知的6种继承方式

JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下:// 父类function Person(name) { // 给构造函数添加了参数  this.name  name;