JavaScript - 基于原型(prototype)实现继承

在面向对象编程(OOP)思想中,继承是指类与类之间的关系。但在JS中,没有类的概念。当然我们可以通过构造函数来模拟(实现)类与类之间的关系,那么问题来了,虽然JS模拟了类与类之间的关系,但在JS中又怎样实现继承呢?

原型,使得类与类之间可以实现继承,多个实例对象可以共享一个方法。

如果多个实例对象不共享一个方法,不使用原型概念,会发生什么事情?

// 抽象一个数据行为模板(class)
// 构造函数 => Person
function Person(name,age){
    this.name = name;
    this.age = age;
    this.like = function (){
   	   console.log("喜欢学习PHP");
   }
}

// 实例对象 => 初始化
var per1 = new Person("小王",20);
var per2 = new Person("小李",30);

// 我现在有两个实例对象,我想让这两个对象都使用Person中的like方法
per1.like();//喜欢学习PHP
per2.like();//喜欢学习PHP

// 那么问题来了,两个实例对象所应用的方法(like)是同一个方法吗?
// per1.like === per2.like ?
console.log(per1.like === per2.like);//false

可以清楚的看到,两个实例对象应用的并不是同一个方法,否则应该返回true才对。
虽然都使用了like方法,但是per1与per2并没有继承构造函数中的方法,而是单独开辟了一块空间,这显然会造成将僵尸代码,如果100个对象都需要这个like方法,每个实例对象都需要开辟独立空间来使用这个方法。如果工程不算大,体现的不会太明显。一旦工程大起来,程序运行速度就会有明显的差别。

上述文字图解:
在这里插入图片描述
基于原型实现继承的图解:
在这里插入图片描述
如何把上述代码加工,让此方法基于原型实现继承呢?

每创建一个构造函数,该函数就会自动带有一个 prototype 属性。该属性是个指针,指向了一个对象,称之为原型对象(prototype object)。原型对象上默认有个 constructor 属性,该属性为构造器,值为构造函数,通过调用构造函数产生的实例,都有一个内部属性,指向了原型对象。所以实例能够访问原型对象上的所有属性和方法

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。通俗点说就是,实例通过内部指针可以访问到原型对象,原型对象通过constructor指针,又可以找到构造函数。

// 抽象一个数据行为模板(class)
// 构造函数 => Person
function Person(name,age){
    this.name = name;
    this.age = age;
}

// Person => 原型对象(prototype) => 方法
Person.prototype.like = function(){
    console.log("喜欢学习PHP");
}
 
// per1.like === per2.like ?
console.log(per1.like === per2.like);//true

这样,per1与per2都应用了同一个like方法,也就是说:基于原型实现了继承

把构造函数中原型对象中的方法封装为一个对象(万物皆对象嘛)

Person.prototype = {
   //将构造函数(Person)指向构造器(constructor)
	constructor:Person,
    	like:function (){
     	console.log("喜欢学习PHP");
    }
}

需要注意的是,如果不将该实例对象的构造函数指向构造器,则会出现如图问题:
在这里插入图片描述
如果实例对象的构造器(constructor)属性不正确指向所归属的构造函数,则会出现工厂模式一样的问题,无法找到该实例对象属于哪个构造函数,所以我们要手动设置constructor属性,让其指向实例对象归属的构造函数。

PS:JavaScript的构造函数就相当于类(class)的概念,而继承则需要原型来实现。

已标记关键词 清除标记
相关推荐
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页