JS原型与原型链的深入理解

站长资源 2024/11/28 佚名

58 1538 58

DDR爱好者之家 Design By 杰米

要了解原型和原型链，首先要理解普通对象和函数对象。

一、普通对象和函数对象的区别

在Javascript的世界里，全都是对象，而对象之间也是存在区别，我们首先区分一下普通对象和函数对象，如下代码：

function f1(){};
var f2 = function(){};
var f3 = new function(){};

var o1 = {};
var o2 = new Object();
var o3 = new f1();

console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object

在上面的代码中可以看出，f1、f2和f3都是函数对象，而o1，o2和o3都是object对象，也就是普通对象，函数对象本质就是由new function（）构造而来，其他的都是普通对象；函数对象和普通对象理解之后，后文会说明两者的区别。

二、原型

在JavaScript中，原型也是一个对象，原型的作用，则是实现对象的继承。

在js的所有函数对象中，都存在一个属性prototype，该属性对应当前对象的原型。

而所有的JavaScript对象，都存在一个_proto_属性（由于_proto_是个非标准属性，因此只有ff和chrome两个浏览器支持，标准方法是Object.getPrototypeOf()），_proto_属性指向实例对象的构造函数的原型，理解起来就如下：

var p = new Person(); 
console.log(p._proto === Person.prototype)//true

从上面代码可以看出，p是实例对象，Person是p的构造函数，可以看出来p的_proto_属性指向构造函数Person的原型。

下面用代码来解释一下js是如何通过原型进行继承的：

var parent = function(name){
 this.name = name;
}
parent.prototype.getName = function(){
 return this.name;
}
var son = new parent("huahua");

console.log(son.getName());//'huahua'

显然，son继承了parent的原型中的函数属性getName。

三、原型链

除开Object的prototype的原型是null以外，所有的对象和原型都有自己的原型，对象的原型指向原型对象。

在层级多的关系中，多个原型层层相连则构成了原型链。

在查找一个对象的属性时，倘若在当前对象找不到该属性，则会沿着原型链一直往上查找，知道找到为止，如果到了原型链顶端，还没找到，则返回undefined。

四、constructor

constructor是构造函数创建的实例的属性，该属性的作用是指向创建当前对象的构造函数。

例如，son.constructor == parent;//true

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

JS,原型,原型链

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“JS原型与原型链的深入理解”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

JS原型与原型链的深入理解

利用n 升级工具升级Node.js版本及在mac环境下的坑

js中数组插入、删除元素操作的方法

评论“JS原型与原型链的深入理解”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接