美文网首页
JS实现继承方式

JS实现继承方式

作者: doudouY075 | 来源:发表于2017-12-29 14:42 被阅读0次

js中的继承:

Object是所有对象的父级/父类型/超类型,js中所有的对象都直接或间接的继承自Object.

继承有两种方式:接口继承和实现继承,js中只支持实现继承,实现继承主要依赖原型链来完成.

说明 : 其他语言的继承是通过类来实现,js中没有类的概念,js中的继承是某个对象继承另一个对象,是基于对象的继承.

一.JS实现继承方式

     (1)属性拷贝(混入式继承)

     (2)原型式继承

     (3)原型链继承

     (4)借用构造函数继承  经典继承  伪对象继承

     (5)组合继承

     (6)通过特定的方法实现继承

     (7)内容拷贝

1.属性拷贝(混入式继承)

   属性拷贝:

    存在问题: 如果父对象中有引用类型,子对象和父对象的该属性会共享一份数据,修改其                         中一个影响另外一个

     函数拷贝:Object.assign(目标对象,要拷贝属性的对象(多个))------>ES6支持

Object.assign(o,obj1,0bj2)

2.原型式继承(不是严格意义上的继承)

(1)利用构造函数创建出来的对象可以使用原型对象的属性和方法

(2)替换原型

(3)设置子构造函数的原型对象时是父构造函数的原型:student.prototype=person.prototype

    存在问题:1)只能获取父构造函数的原型对象的属性和方法,不能获取实例的属性和方法

                    2)无法修正构造器属性

3.扩展内置对象

Object Array Date Function String Number Boolean

通过这个方式可以扩展内置构造函数,但不建议这样做,在实际开发中很多人开发,项目的代码量非常庞大,如果每个人都通过这个方式扩展对象,可能会出现方法被覆盖等安全问题,不方便项目管理问题

(1)安全的扩展内置对象

    a.提供一个构造函数(自己写的)

     b.设置这个构造函数的原型对象是内置构造函数的一个实例

安全扩展内置对象图解:

3.原型链继承

1)每一对象都是由构造函数创建的

2)每一个构造函数都有自己的原型对象

3)构造函数的原型对象也是一个对象

4)构造函数的原型对象也有自己的构造函数

5)构造函数原型对象的构造函数也有自己的原型对象

6)构造函数原型对象的构造函数的原型对象也是一个对象,也有自己的构造函数

以上就形成了一个人链式结构,这个就称为原型链.

原型链的顶端是Object.prototype

        Object.prototype._proto_=null

A.原型链属性的访问原则:(就近原则)

1).通过对象.属性访问属性的时候,首先会查找自身,如果有直接使用;

2).如果自身没有,会查找该对象的原型对象,如果有直接使用;

3).如果没有,会查找原型对象的原型对象,如果有直接使用;

4).如果没有,就继续之前的操作,向原型链的顶端继续查找

5).直到查找到Object.prototype,如果有就直接使用,如果没有,返回undefined或者报错

B.原型链继承:

1).提供一个父构造函数和子构造函数

2).设置子构造函数的原型对象是父构造函数的实例

Student.prototype=new Person()

C.复杂的原型链示例

动物(毛色,跑) ->人(姓名,useTool)->学生(学号,学习)->男学生(性别男,打游戏)

1).提供4个构造函数

2).设置属性和方法(属性写在构造函数中,方法写在原型上)

3).设置原型链继承

4).修正构造器属性

D.原型链继承注意点:

    1)在完成原型链继承后再修正构造器属性

     2)在完成原型链继承后再设置原型对象的属性和方法

     3)在完成原型链继承后只能通过对象的动态特性添加属性

E.原型链继承存在的问题:

     1)无法传递参数给父构造函数;

      2)继承过来的属性和方法会成为原型属性和方法,存在共享问题

4.Object.create()方法

Object.create会创建一个新的对象,并且设置该对象的原型对象是传入的对象(ES5才支持)

兼容性处理:

方法一

方法二:如果有create方法就直接用,如果没有就自己添加一个方法

函数封装

5.call和apply函数

1).在ES3中,系统给Function的原型添加了2个方法

     Function.prototype.call

     Function.prototype.apply

    作用:借用其他对象的方法

  参数:(1)第一个参数:实际调用方法的对象(函数内部this的绑定对象);

           (2)后面的参数: a:call,参数1,参数2.....     参数列表

                                    b:apply,[参数1,参数2.....]    参数数组

6.借用构造函数继承 经典继承 伪对象继承

1)借用构造函数继承的基本写法,解决了无法传递参数给父构造函数的问题

存在的问题:无法获取原型属性和方法

7.组合继承

1).借用构造函数继承---->只能获取实例属性和方法

2).原型式继承---->获取原型属性和方法

问题:共享同一个原型对象

8.浅拷贝和深拷贝

1)浅拷贝:地址拷贝(指针拷贝),存在数据共享问题

2)深拷贝:内容拷贝(完全拷贝)

      (1)提供一个函数封装深拷贝,有两个参数,第一个是目标参数,第二个参数是要拷贝属性的对象;

      (2)判断第一个参数,如果没有值就自己初始化

      (3)for...in遍历第二个参数

                a.如果是值类型或者是函数,直接赋值

                b.如果不是值类型的数据,就再一次调用这个方法拷贝内部存储的内容

通过深拷贝实现继承

借用构造函数----->获取实例属性

深拷贝------>获取原型属性

Array.isArray(ES5才支持)

作用:判断对象时候是个数组

二.基本包装类型

1.基本包装类型:String  Number  Boolean

1)创建字符串对象

2)创建数值对象

3)创建布尔对象

4)特殊的方式创建

2.基本包装类型注意点

   1)在比较是否相等的时候

基本数据类型怎么会有属性?

 2)内部实现:

字符串 布尔 数值在访问属性或者调用方法的时候

 1).内部会默认创建一个对象

 2).通过这个对象访问属性或调用方法

 3).得到结果后返回结果

 4).销毁该对象

3.Number使用注意

相关文章

  • JS继承的实现的几种方式

    前言 JS作为面向对象的弱类型语言,继承也是非常强大的特性之一,那么如何在JS实现继承呢? JS继承的实现方式 既...

  • js中的继承-原型与原型链

    面向对象的语言支持两种继承方式,接口继承和实现继承js无法实现接口继承,只支持实现继承,主要通过原型链来实现。具体...

  • JS继承

    JS中的继承 许多OO语言都支持两种继承方式:接口继承和实现继承; 因为JS中没有类和接口的概念 , 所以JS不支...

  • JS实现继承方式

    js中的继承: Object是所有对象的父级/父类型/超类型,js中所有的对象都直接或间接的继承自Object. ...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • JavaScript 10

    js继承的概念 1.通过原型链方式实现继承(对象间的继承) 2.类式继承(构造函数间的继承) 由于js不像Java...

  • js继承的实现

    下面是小结的js四种方式实现的继承

  • 1、js继承方式

    JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下: 1、原型链继承 特点: 非常纯粹的继承关系...

  • 对象的继承

    JS 作为面向对象的弱类型的语言,继承是它非常强大的特征之一 JS继承实现的方式: 1.原型链继承2.构造函数继承...

  • JS中基于原型实现继承

    本文不会对于JS中的继承机制进行深入研究,只聊js中基于原型实现继承的方式,如果需要了解JS中的继承机制及其相关背...

网友评论

      本文标题:JS实现继承方式

      本文链接:https://www.haomeiwen.com/subject/brazlxtx.html