资讯专栏INFORMATION COLUMN

JavaScript面向对象 ~ 原型和继承(1)

keithyau / 3003人阅读

摘要:当构造函数创建的实例对象需要访问某个方法或属性,而这个对象又没有该方法或属性的时候,它会去原型上面去查找。实例成员表示的是实例方法和实例属性,由构造函数创建的对象,也就是实例对象提供。

经过面试的挫折之后,继续深入学习~~

1、原型概念的提出
传统的构造函数对象包含方法时,在构造函数创建时,就会将所有内容重新创建一次,导致数据的重复,代码的冗余,如下所示:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function () {
    console.log("Hello");
  }
}
var p1 = new Person();
var p2 = new Person();
p1.sayHello === p2.sayHello // 结果为false,因为p1,和p2的sayHello虽结构一样,但却是两个不同的对象

改良1:将方法提取到外面

function sayHello(){
  console.log("Hello");
}
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = sayHello;
}
var p1 = new Person();
var p2 = new Person();
p1.sayHello === p2.sayHello // 结果为true,但当代码量不断增加,自定义的函数越来越多时,可能会和框架中的函数发生命名冲突,也不利于代码的维护

改良2:将方法放到构造函数中,且避免命名冲突,原型概念出现

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function (){
   console.log("Hello");
}
var p1 = new Person();
var p2 = new Person();
p1.sayHello === p2.sayHello // 结果为true

构造函数一旦被创建,就会有一个原型属性,也是个对象,可以往里面添加成员,每个由构造函数创建出来的对象都会默认连接到原型属性上去。

当js引擎查找对象属性时,会先查找对象上是否具有该属性,如果没有,就会去原型属性上去查找。

所以,什么是原型?原型是能够实现继承的,当构造函数被定义的时候,原型也就被创建出来,它可以存储属性和方法,既是一个属性也是一个对象。当构造函数创建的实例对象需要访问某个方法或属性,而这个对象又没有该方法或属性的时候,它会去原型上面去查找。也就是实例对象访问原型对象的属性或调用原型对象的方法,说的通俗一点也就是把别的对象的方法或属性拿过来自己用,就是继承,所以我们也可以说对象继承自其原型。

引入:属性查找机制:对象在访问属性或方法时,首先在当前对象查找,如果该对象有该属性或方法,则停止查找,如果没有,则去原型中查找,如果原型没有,则去原型的原型中查找,直到原型的顶部,如果还是没有,则返回undefined(属性)或 xxx is not a function(方法)

2、一些相关概念 ① 面向对象的相关概念

类class:在js中就是构造函数

实例(instance)与对象(object)
实例是指某个构造函数创建出来的对象,我们称之为xxx构造函数的实例;

键值对与属性和方法
在js中,键值对的集合称之为对象
如果数据是值,该键值对为属性prototype
如果数据是函数,该键值对为方法method

父类与子类
js中没有class的概念,由C++引申过来,父类又称基类,子类又称派生类
js中称为父对象、子对象

② 原型的相关概念

prototype针对构造函数,称为“原型属性”

prototype针对构造函数创建出来的对象,称为“原型对象”

原型属性与原型对象的关系:
!!构造函数的原型属性和构造函数创建出来的对象的原型对象,是一个东西
!!构造函数的原型属性所指向的对象,与构造函数创建出来的对象(实例对象),这是两个不同的对象(快绕晕了)

3、对象继承自其原型

构造函数创建出来的对象(实例对象)继承构造函数的原型属性和原型对象

4、原型的使用

利用对象的动态特性:在原来的对象上添加成员
构造函数.prototype.xxx = ccc;

直接替换:重新创建一个对象
构造函数.prototype = {};

5、__proto__

通过 proto 允许实例对象直接访问原型,通常用于在调试中查看原型的成员(实例对象不允许修改原型)

6、原型的结构

有一个默认属性:constructor => 构造器,表示该原型是与什么构造函数联系起来的
∴ 构造函数通过 prototype 的属性访问原型,原型可以通过 constructor 访问构造函数

7、继承

简单继承:将别的对象的方法或属性直接拿过来,加到自己身上,于是我就有了该方法或属性。=> 简单粗暴,层次清晰

利用原型继承:不需要添加成员,只要原型具有,我便有了。=> 提高复用性

混合式继承:将方法或属性利用混入的方法,加到构造函数原型中,实例对象即有了指定的方法或属性。

8、静态成员和实例成员的概念

该概念由其他面向对象的语言引入。

静态成员表示的是静态方法和静态属性,由构造函数提供。

实例成员表示的是实例方法和实例属性,由构造函数创建的对象,也就是实例对象提供。

9、小结

什么是原型?

如何使用原型?

什么是原型继承? => 实例对象默认连接到原型中,可以继承原型的方法和属性,也可以自己给原型赋值

如何实现? => 混合式继承

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

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

相关文章

  • 面向对象JavaScript

    摘要:是完全的面向对象语言,它们通过类的形式组织函数和变量,使之不能脱离对象存在。而在基于原型的面向对象方式中,对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或者只是部分具备一些面向对象的特征。本文将回归面向对象本意,从对语言感悟的角度阐述为什...

    novo 评论0 收藏0
  • JS对象(1)重新认识面向对象

    摘要:对象重新认识面向对象面向对象从设计模式上看,对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外,允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象 从设计模式上看,对象是...

    superw 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    李昌杰 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    Lyux 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    AaronYuan 评论0 收藏0
  • 重新认识JavaScript面向对象: 从ES5到ES6

    摘要:基于原型的面向对象在基于原型的语言中如并不存在这种区别它只有对象不论是构造函数,实例,原型本身都是对象。允许动态地向单个的对象或者整个对象集中添加或移除属性。为了解决以上两个问题,提供了构造函数创建对象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新认识面向对象 1. JavaScript...

    VishKozus 评论0 收藏0

发表评论

0条评论

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