你清楚JS的原型链吗

news/2024/7/19 14:09:43 标签: js, 原型链, prototype, javascript

题记

每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,这个对象是包含可以由特定类型的所有实例共享的属性和方法。简单理解:prototype就是通过调用构造函数而创建的那个对象实例的原型对象,可以让所有对象实例共享它所包含的属性和方法。

javascript">function Person() {}

Person.prototype.name = "Helen";
Person.prototype.age = 23;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
  console.log(this.name);
};

var person1 = new Person();
person1.sayName(); // Helen

var person2 = new Person();
person2.sayName(); // Helen

上面这个例子中,我们把方法和属性添加到了Person的prototype属性中,所有构造函数的实例共享这些属性和方法。

理解原型对象

创建一个新函数,就会有一个prototype属性,指向函数的原型对象。默认情况下,所有原型对象都会自动获得一个constructor属性,指向prototype属性所在函数的指针,上述例子中的Person构造函数、Person的原型属性和Person现有的两个实例之间的关系可以用下图来表示:
在这里插入图片描述
注意:虽然person1和person2这两个实例都不包含属性和方法,但我们可以调用person1.sayName(),这是通过查找对象属性的过程来实现的。

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始,如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象

原型链引入

原型链是实现继承的主要方法,其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。从上面我们知道,每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。现在我们让原型对象等于另一个类型的实例,结果会是怎样呢?

在这里插入图片描述
此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针,假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条,即原型链

上图对应的代码如下:

javascript">function SuperType() {
	this.property = true;
}

SuperType.prototype.getSuperValue = function() {
	return this.property;
};

function SubType(){
	this.subproperty = false;
}

// 继承了SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function() {
	return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue())

http://www.niftyadmin.cn/n/1659471.html

相关文章

ElementUI对于表格的二次封装

前言 最近在做的项目中,有大量界面用到了表格(el-table)组件,但是里面具体显示的内容不同,是从后端获取过来的,如果每一个界面写一下el-table的代码的话,会造成代码量大且不易维护的后果,所以就对el-table…

9.字符串处理

1、字符串格式化 &#xff08;1&#xff09;整理字符串第一步是处理空格 <?php $str php ; echo $str; ?>由于php编辑器文本上的空格在网页上并不存在&#xff0c;所以在这里要清理空格 需要用到函数—— ltrim()——清理左边的空格 rtrim()——清理右边的空…

前端将后端返回的数字(英文字母),转成对应的文字进行显示

前言 类似于省市区&#xff0c;状态&#xff0c;性别之类的可以枚举出来的变量&#xff0c;一般情况下数据库中存储的是其对应的value值&#xff0c;像省市区联动的话&#xff0c;前端界面中显示的是省市区的名字&#xff0c;但是接口的入参一般是对应的code码&#xff1b;如果…

校园招聘——双选会感悟(前段学习总结)

今天&#xff0c;2016.12.01&#xff0c;是学校冬季校园招聘的一天&#xff0c;不得不说这是大学三年以来第一次参加这样的活动&#xff0c;而且还是发自内心自愿的&#xff0c;游荡了一圈&#xff0c;评价一下&#xff0c;仅仅是去打了个酱油&#xff0c;不过还是蛮有感触的&a…

Vue组件如何封装,这些原则您需要了解一下!

什么样的内容需要封装一段代码在项目中出现两次就开始考虑是否应该进行封装&#xff0c;出现三次就肯定要封装&#xff0c;大到一个页面&#xff0c;一个组件&#xff0c;小到一个function和一个css样式。 封装原则以下将封装出来的通用组件叫做子组件&#xff0c;引用通用组件…

ES5中新增的方法,让你的开发效率6的飞起

前言 ES5也被称为ECMAScript 5或ECMAScript 2009&#xff0c;在ES5中新增了许多方法&#xff0c;包括数组方法、字符串方法、对象方法等。今天我们主要来学习以下内容&#xff1a; 数组迭代方法&#xff1a;forEach()、map()、filter()、some()、every()字符串方法&#xff1…

JS创建对象的9种方式,你还在愁不知道如何创建对象吗?

什么是对象呢&#xff1f;ECMA-262中定义&#xff1a;对象是无序属性的集合&#xff0c;其属性值可以包含基本值、对象或者函数。 理解一下&#xff1a;对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字&#xff0c;而每个名字都映射到一个值。 知道什么是对象…

JS实现继承的7种方式,你都知道哪几种???

题记 ECMAScript只支持实现继承&#xff0c;而且其实现继承主要是依靠原型链来实现的。 继承的方式 方式一&#xff1a;原型链 关于原型链实现继承的方式我们在 你清楚JS的原型链吗 这里提到过&#xff0c;是通过让原型对象等于另一个类型的实例来实现继承的&#xff0c;但…