前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >对Javascript 类、原型链、继承的理解

对Javascript 类、原型链、继承的理解

作者头像
smy
发布于 2019-02-13 01:49:28
发布于 2019-02-13 01:49:28
68900
代码可运行
举报
文章被收录于专栏:smysmy
运行总次数:0
代码可运行

一、序言

  和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承。(以下不讨论ES6中利用class、extends关键字来实现类和继承;实质上,ES6中的class、extends关键字是利用语法糖实现的)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Javascript灵活到甚至可以实现接口的封装(类似Java中的Interface和implements)。

二、类的实现

1.我对类的理解   首先,我先说说我对类的理解:类是包含了一系列【属性/方法】的集合,可以通过类的构造函数创建一个实例对象(例如人类是一个类,而每一个人就是一个实例对象),而这个实例对象中会包含两方面内容: a.类的所有非静态【属性/方法】    非静态【属性/方法】就是每一个实例所特有的,属于个性。(例如每个人的名字都不相同,而名字这个属性就是一个非静态属性) b.类的所有静态【属性/方法】    静态【属性/方法】就是每一个实例所共享的,属于共性。(例如每个人都要吃饭,而吃饭这个方法就是一个非静态方法) 2.Javascript对类的实现 a.利用函数创建类,利用new关键字生成实例对象  (话不多说,先上代码,以下没有特别说明的话,我都会先上代码,然后进行解释说明)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 代码2.2.a
function Human() {
    console.log('create human here')
}
var fakeperson = Human() // undefined
var person = new Human() // {}

这里Human既是一个普通函数,也是一个类的构造函数,当调用Human()的时候,它作为一个普通函数会被执行,会输出create human here,但是没有返回值(即返回undefined);而当调用new Human()时,也会输出create human here并且返回一个对象。因为我们用Human这个函数来构造对象,所以我们也把Human称作构造函数。所以通过定义构造函数,就相当于定义了一个类,通过new关键字,即可生成一个实例化的对象。 b.利用构造函数实现非静态【属性/方法】

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 代码2.2.b
function Human(name) {
    this.name = name
}
var person_1 = new Human('Jack')
var person_2 = new Human('Rose')
console.log(person_1.name)  // Jack
console.log(person_2.name)  // Rose

这里的Human构造函数中多了一个参数并且函数体中多了一句this.name = name,这句话的中的this指针指向new关键字返回的实例化对象,所以根据构造函数参数的不同,其生成的对象中的具有的属性name的值也会不同。而这里的name就是这个类的非静态【属性/方法】 c.利用prototype实现静态【属性\方法】 这里因为要用到原型链的知识,所以放到原型链后面说。

三、原型链

1.类的prototype是什么?    在Javascript中,每当我们定义一个构造函数,Javascript引擎就会自动为这个类中添加一个prototype(也被称作原型) 2.对象的 proto 是什么?    在Javascript中,每当我们使用new创建一个对象时,Javascript引擎就会自动为这个对象中添加一个__proto__属性,并让其指向其类的prototype

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 代码3.2
function Human(name) {
    this.name = name
}
console.log(Human.prototype)
var person_test1 = new Human('Test1')
var person_test2 = new Human('Test2')
console.log(person_test1.__proto__)
console.log(person_test2.__proto__)
console.log(Human.prototype === person_test1.__proto__) // true
console.log(Human.prototype === person_test2.__proto__) // true

我们会发现Human.prototype是一个对象,Human类的实例化对象person_test1、person_test2下都有一个属性__proto__也是对象,并且它们都等于Human.prototype,我们知道在Javascript中引用类型的相等意味着他们所指向的是同一个对象。所以我们可以得到结论,任何一个实例化对象的__proto__属性都指向其类的prototype。 3.对象的 proto 有什么作用?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 代码3.3
var Pproto = {
    name:'jack'
}
var person = {
    __proto__:Pproto
}
console.log(person.name) // jack
person.name = 'joker'
console.log(person.name) // joker

我们发现最开始我们并没有给person定义name属性,为什么console出来jack呢?这就是Javascript著名的原型链的结果啦。话不多说,先上图:

当我们访问person.name时,发生了什么呢? 首先它会访问person对象本身的属性,如果本身没有定义name属性的话,它会去寻找它的__proto__属性对象,在这个例子中person的__proto__属性对应的是Pproto对象,所以person的__proto__指向了Pproto,然后我们发现Pproto对象是具有name属性的,那么person.name就到此为止,返回了jack,但是如果我们又给person加上了一个自身的属性name呢?这时,再次person.name就不会再寻找__proto__了,因为person本身已经具有了name属性,而且其值为joker,所以这里会返回joker.

我们注意到上图中Pproto的__proto__指向了Object,这是因为每一个通过字面量的方式创建出来的对象它们都默认是Object类的对象,所以它们的__proto__自然指向Object.prototype。

4.利用prototype实现静态【属性/方法】

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 代码3.4
function Human(name) {
    this.name = name
}
Human.prototype.eat = function () {
    console.log('I eat!')
}
var person_1 = new Human('Jack')
var person_2 = new Human('Rose')
person_1.eat() // I eat!
person_2.eat() // I eat!
console.log(person_1.eat === person_2.eat) // true

这里我们在构造函数外多写了一句:Human.prototype.eat = function() {...} 这样以后每个通过Human实例化的对象的__proto__都会指向Human.prototype,并且根据上述原型链知识,我们可以知道只要构造函数中没有定义同名的非静态【属性/方法】,那么每个对象访问say方法时,访问的其实都是Human.prototype.say方法,这样我们就利用prototype实现了类的静态【属性/方法】,所有的对象实现了共有的特性,那就是eat

四、继承的实现

1.我对继承的理解   假如有n(n>=2)个类,他们的一些【属性/方法】不一样,但是也有一些【属性/方法】是相同的,所以我们每次定义它们的时候都要重复的去定义这些相同的【属性/方法】,那样岂不是很烦?所以一些牛逼的程序员想到,能不能像儿子继承父亲的基因一样,让这些类也像“儿子们”一样去“继承”他们的“父亲”(而这里的父亲就是包含他们所具有的相同的【属性/方法】)。这样我们就可以多定义一个类,把它叫做父类,在它的里面包含所有的这些子类所具有的相同的【属性/方法】,然后通过继承的方式,让所有的子类都可以访问这些【属性/方法】,而不用每次都在子类的定义中去定义这些【属性/方法】了。

2.原型链实现继承(让子类继承了父类的静态【属性/方法】)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 代码4.1
function Father() {
}
Father.prototype.say = function() {
    console.log('I am talking...')
}
function Son() {
}
var sonObj_1 = new Son()
console.log(sonObj_1.say) // undefined

// 原型链实现继承的关键代码
Son.prototype = new Father()

var sonObj_2 = new Son()
console.log(sonObj_2.say) // function() {...}

看到这句Son.prototype = new Father()你可能有点蒙圈,没关系,我先上个原型链的图,你分分钟就能明白了

对着图我们想一想,首先,一开始Son、Father两个类没有什么关系,所以在访问say的时候肯定是undefined,但是当我们使用了Son.prototype = new Father()后,我们知道通过new Son()生成的对象都会有__proto__属性,而这个属性指向Son.prototype,而这里我们又让它等于了一个Father的对象,而Father类又定义了静态方法say,所以这里我们的sonObj_2通过沿着原型链寻找,寻找到了say方法,于是就可以访问到Father类的静态方法say了。这样就实现了子类继承了父类的静态【属性/方法】,那么如何让子类继承父类的非静态【属性/方法】呢?

3.构造函数实现继承(让子类继承了父类的非静态【属性/方法】)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 代码4.3
function Father(name) {
    this.name = name
}
function Son() {
    Father.apply(this, arguments)
    this.sing = function() {
        console.log(this.name + ' is singing...')
    }
}
var sonObj_1 = new Son('jack')
var sonObj_2 = new Son('rose')
sonObj_1.sing() // jack is singing...
sonObj_2.sing() // rose is singing...

在这个例子中,通过在Son的构造函数中利用apply函数,执行了Father的构造函数,所以每一个Son对象实例化的过程中都会执行Father的构造函数,从而得到name属性,这样,每一个Son实例化的Son对象都会有不同的name属性值,于是就实现了子类继承了父类的非静态【属性/方法】

4.组合方式实现继承(组合 原型链继承 + 构造函数继承) 顾名思义,就是结合上述两种方法,然后同时实现对父类的静态及非静态【属性/方法】的继承,代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 代码4.4
function Father(name) {
    this.name = name
}
Father.prototype.sayName = function() {
    console.log('My name is ' + this.name)
}
function Son() {
    Father.apply(this, arguments)
}
Son.prototype = new Father()
var sonObj_1 = new Son('jack')
var sonObj_2 = new Son('rose')
sonObj_1.sayName() // My name is jack
sonObj_2.sayName() // My name is rose

这里子类Son没有一个自己的方法,它的sayName方法继承自父类的静态方法sayName,构造函数中继承了父类的构造函数方法,所以得到了非静态的name属性,因此它的实例对象都可以调用静态方法sayName,但是因为它们各自的name不同,所以打印出来的name的值也不同。看到这里,大家可能认为这已经是一种完美无缺的Javascript的继承方式了,但是还差一丢丢。因为。。。

5.寄生组合方式实现继承   大家可以先自己思考思考哦,待续。。。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript 继承相关概念究级备忘录
1. 基础 function Parent (name) { this.name = name; } var son = new Parent('chris'); // 实例的 contructor 指向实例的构造函数 console.log(son.constructor === Parent); // true // instanceof 用于验证实例与原型对象的关系 console.log(son instanceof Parent); // true // isProto
逆葵
2019/04/25
3210
JavaScript 继承相关概念究级备忘录
深入理解原型
只要我们定义一个函数,prototype作为函数的属性存在了,它的初始值是一个对象。
小周sir
2019/09/23
5490
深入理解原型
一篇JavaScript技术栈带你了解继承和原型链
在学习JavaScript中,我们知道它是一种灵活的语言,具有面向对象,函数式风格的编程模式,面向对象具有两点要记住,三大特性,六大原则。
达达前端
2019/11/19
4650
JavaScript实现继承
使用class继承非常简单。子类使用extends关键字表明继承于哪个类,并在子类中调用super(),这相当于使用call()改变this的指向。
不作声
2020/10/30
4130
JavaScript原型和原型链( prototype 与 __proto__ )
var a = new A; //a 类型:对象 //A 类型:函数 var Object = new Function(); //var 对象 = new 函数; Object.__proto__ === Function.prototype; //对象.__proto__ === 函数.prototype; Function.__proto__ === Function.prototype; //因为 Function 也是 Object
Leophen
2019/08/23
8170
Javascript实现完美继承实现javascript完美继承要考虑三个方面:
实现javascript完美继承要考虑三个方面: 第一步: 获取父构造函数体内的属性 解决方法: 通过 Father.call(this)实现(这里的this是子构造函数) 第二步: 根据父构造函数
zhaoolee
2018/04/19
7200
Javascript实现完美继承实现javascript完美继承要考虑三个方面:
JavaScript实现继承的6种方式
创建 Father 的实例,并赋值给 Son 的原型 Son.prototype。实现了 Son 继承 Father,
andyhu
2023/06/18
4060
JS原型链与继承别再被问倒了
继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实现继承则继承实际的方法.由于js中方法没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且其 实现继承 主要是依靠原型链来实现的.
全栈程序员站长
2021/06/10
6340
JavaScript学习总结(四)——this、原型链、javascript面向对象
根据题目要求,对给定的文章进行摘要总结。
张果
2018/01/04
1.5K0
JavaScript学习总结(四)——this、原型链、javascript面向对象
【前端基础进阶】JS原型、原型链、对象详解
在上面的例子中 o1 o2 o3 为普通对象, f1 f2 f3 为函数对象。 怎么区分,其实很简单,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。 f1,f2,归根结底都是通过 new Function()的方式进行创建的。
super.x
2019/04/12
7970
【前端基础进阶】JS原型、原型链、对象详解
原型和原型链
prototype(原型):prototype是Function对象的一个属性,它定义了构造函数制造出的对象的公用祖先(属性和方法),可以继承该原型的属性和方法。原型也是对象。
jade_
2021/04/28
5420
从零开始学 Web 之 JS 高级(二)原型链,原型的继承
原型链表示的是实例对象与原型对象之间的一种关系,这种关系是通过__proto__原型来联系的。
Daotin
2018/08/31
2.2K0
从零开始学 Web 之 JS 高级(二)原型链,原型的继承
[我的理解]Javascript的原型与原型链
一、原型与原型链的定义 原型:为其他对象提供共享属性的对象     注:当构造器创建一个对象,为了解决对象的属性引用,该对象会隐式引用构造器的"prototype"属性。程序通过constructor.prototype可以直接引用到构造器的"prototype"属性。并且添加到对象原型里的属性,会通过继承与所有共享此原型的对象共享。 原型链:每个由构造器创建的对象,都有一个隐式引用(叫做对象的原型)链接到构造器的"prototype"属性。再者,原型可能有一个非空隐式引用链接到它自己的原型,以此类推,这叫
sam dragon
2018/01/17
8840
[我的理解]Javascript的原型与原型链
前端day18-JS高级(完整的原型链)学习笔记
01-面向对象三大特征(封装、继承、多态) a.封装:将某个具体功能封装在对象中,只对外部暴露指定的接口,外界在使用的时候,只考虑接口怎么用,不用考虑内部怎么实现(前面学习的api其实就是一种封装思想) ​ b.继承:一个对象拥有其他对象的属性和方法 ​ c.多态:一个对象在不同情况下的多种状态 1.1-多态(js中了解即可) <script> /*多态(JS中了解即可,使用不多):一个对象在不同情况的多种状态 饲养员对象Person : 给动物对象喂养
帅的一麻皮
2020/05/07
4960
前端day18-JS高级(完整的原型链)学习笔记
JavaScript原型链与继承
只要是对象,一定有原型对象,就是说只要这个东西是个对象,那么一定有proto属性。(错的)
用户7043603
2022/02/26
1.6K0
前端成神之路-JavaScript高级第02天
实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sing 就是实例成员,实例成员只能通过实例化的对象来访问
海仔
2021/01/21
3050
深入理解原型对象和原型链
原型对象和原型链在前端的工作中虽然不怎么显式的使用到,但是也会隐式的使用了,比如使用的jquery,vue等啦。在进入正题的时候,我们还是需要明白什么是__proto__,prototype等知识点,主要讲解构造函数,这篇博文大多是问答形式进行...
Jimmy_is_jimmy
2019/07/31
6160
第202天:js---原型与原型链终极详解
JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明
半指温柔乐
2018/09/11
9620
第202天:js---原型与原型链终极详解
JS学习笔记
内部函数被返回到外部,函数本身保留了父函数的AO,即使父元素执行完了,取消对AO的引用,但依旧被子函数保留下来了,就形成了闭包。
小丞同学
2021/08/16
4150
JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
关于原型在JavaScript 进阶教程(1)--面向对象编程这篇文章已经讲过了,今天简单来复习一下。
AlbertYang
2020/09/08
5240
JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
相关推荐
JavaScript 继承相关概念究级备忘录
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验