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

一、序言

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

Javascript灵活到甚至可以实现接口的封装(类似Java中的Interface和implements)。

二、类的实现

1.我对类的理解

??首先,我先说说我对类的理解:类是包含了一系列【属性/方法】的集合,可以通过类的构造函数创建一个实例对象(例如人类是一个类,而每一个人就是一个实例对象),而这个实例对象中会包含两方面内容:

?a.类的所有非静态【属性/方法】

???非静态【属性/方法】就是每一个实例所特有的,属于个性。(例如每个人的名字都不相同,而名字这个属性就是一个非静态属性)

?b.类的所有静态【属性/方法】

???静态【属性/方法】就是每一个实例所共享的,属于共性。(例如每个人都要吃饭,而吃饭这个方法就是一个非静态方法)

2.Javascript对类的实现

?a.利用函数创建类,利用new关键字生成实例对象

?(话不多说,先上代码,以下没有特别说明的话,我都会先上代码,然后进行解释说明)

// 代码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.利用构造函数实现非静态【属性/方法】

// 代码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

// 代码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__有什么作用?**

// 代码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实现静态【属性/方法】

// 代码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.原型链实现继承(让子类继承了父类的静态【属性/方法】)

??

// 代码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.构造函数实现继承(让子类继承了父类的非静态【属性/方法】)

// 代码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.组合方式实现继承(组合 原型链继承 + 构造函数继承)

??大家可以先自己思考思考哦,待续。。。

5.寄生组合方式实现继承

??大家可以先自己思考思考哦,待续。。。

原文地址:https://www.cnblogs.com/codernie/p/9098184.html

时间: 2024-10-13 19:23:50

对Javascript 类、原型链、继承的理解的相关文章

深入浅出JavaScript之原型链&继承

Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 这部分知识也是JavaScript里的核心重点之一,同时也是一个难点.我把学习笔记整理了一下,方便大家学习,同时自己也加深印象.这部分代码的细节很多,需要反复推敲.那我们就开始吧. 小试身手 原型链

javascript原型链继承

一.关于javascript原型的基本概念: prototype属性:每个函数都一个prototype属性,这个属性指向函数的原型对象.原型对象主要用于共享实例中所包含的的属性和方法. constructor属性:每个原型对象都有一个constructor属性,这个constructor属性包含一个指向prototype属性所在函数的指针. 例如 Foo.prototype.constructor指向Foo函数.这个属性是只读的. __proto__属性(ES6通过对__proto__属性进行标

Javascript的原型、原型链、原型链继承

原型 在javascript中,原型分有两种:显示原型(prototype)和隐式原型(__proto__). __proto__(隐式原型) JavaScript中任意对象都有一个内置属性[[prototype]],在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问.ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf(). prototype(显式原型) 这是函数对象特有的属性.这个属性是一个指针,指向一个对象,这

8条规则图解JavaScript原型链继承原理

原形链是JS难点之一,而且很多书都喜欢用一大堆的文字解释给你听什么什么是原型链,就算有图配上讲解,有的图也是点到为止,很难让人不产生疑惑. 我们先来看一段程序,友情提示sublimeText看更爽: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

老生常谈之JavaScript原型链继承

介绍 本文总结了ES3,ES5,ES7和NS(NonStandard)四种原型链继承的实现方法. 前言 ECMAScript 6 class将给开发者带来JavaScript OOP的规范实现,但这种方式的直接应用和普及至少得等到IE11被淘汰掉,而到那时,说不定我们已转向边沿领域了. 随着Web的快速发展,新的方法可能会随时取代旧的方法,而我们在lifetime中用过的方法,代表着一代人的记忆,又怎能忘怀? 分享 另附上BDD测试 这其中: 较新的JavaScript运行环境能兼容旧的继承方法

Javascript 组合继承 原型链继承 寄生继承

Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { console.log(this.name); }; function SubType(name, age) { //通过ca

一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 = "张三"; } function Obj2() { } Obj2.prototype = new Obj1(); var t2 = new Obj2(); alert(t2.name1); 这里有个明显的缺点就是:(如果父类的属性是引用类型,那么我们在对象实例修改属性的时候会把原型中

javascript 的 继承(一) 之 原型链继承

继承 继承是 OO语言中的一个最为人津津乐道的概念.许多 OO语言都支持两种继承方式:接口继承和实现继承. 接口继承只继承方法签名,而实现继承则继承实际的方法. 如前所述,由于函数没有签名,在 ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. 1.原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法. 其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾一下构造函数.原型和实

JavaScript继承-原型链继承

//原型链继承 function SuperType(){ this.name = 'super'; this.girlFriends = ["xiaoli","xiaowang"]; } SuperType.prototype.sayName = function(){ console.log(this.name); } function SubType(){ this.age = 20; } //创建SuperType的实例赋给SubType的原型 //实现继承

js原型链继承的傻瓜式详解

本文争取用最简单的语言来讲解原型链继承的OOP原理 0.如果对原型继承还没有大致了解,完全一头雾水,请先阅读 <JavaScript高级程序设计>第六章最后部分的寄生组合式继承 或者_廖雪峰js教程里面面向对象部分的原型承部分https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000 1