JS原型对象,原型链

本文详细介绍了JavaScript中对象的创建方式及其与构造函数的关系,并深入探讨了原型对象的作用及原型链的工作原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对象

JS中创建对象都是通过构造函数创建的,所以每个对象中都有一个指向其构造函数的指针constructor

var obj = new Object();
var arr = new Array();
var obj2 = {};  //字面量创建实质上是上面方式的简写
var arr2 = [];

var str = new String("test");  //创建的是对象
var str2 = "test"; //创建的是基本类型值
console.log(typeof str); //object
console.log(typeof str2); //string

原型对象

为了减少重复定义相似的对象,我们把这些相似的数据结构(属性)和行为(方法)抽象出来形成类,这样我们只需要创建类,然后将类实例化即可。所有对象实例继承了类的属性和方法。
在ES5中没有class关键字来创建类,它是通过构造函数和原型对象来模拟类的功能。

原型对象可以使对象实例继承它的属性和方法。要想实现这个继承关系,必须让原型对象和对象实例发生联系。
我们知道对象实例是通过构造函数创建的。那这个构造函数能不能先创建对象原型,然后这个构造函数再创建对象实例,这样对象实例就通过构造函数这个纽带和对象原型发生了联系。

答案是可以,
js的每个函数都有一个prototype属性,这个属性是一个指针,指向的是它的原型对象。我们通过构造函数来创建一个对象。


function Test(){    
    this.name="obj";      //创建构造函数
}

Test.prototype.name = "TestProto"; //创建构造函数的原型对象的属性
Test.prototype.age = 21;

var obj = new Test();  //创建实例对象

console.log(obj);
console.log(Test.prototype);
console.log(obj.name); //访问到了原型对象上的name

obj是Test函数的对象实例,Test.prototype对象是Test函数的原型对象(我们给这个原型对象添加了name和age属性)。这两个对象是如何发生联系的?

打开浏览器调试工具

可以看到obj对象有一个_ proto_属性,这个属性就是指向其构造函数的原型对象。

注意:对象实例只和其构造函数的原型对象有联系,它继承的是原型对象的属性和方法,而不是构造函数的属性和方法。为什么对象不能继承Object的方法?

// 我们可以打印常见的对象的方法,这些方法都是在构造函数的原型中定义的。
console.log(Number.prototype);
console.log(String.prototype);
console.log(Boolean.prototype);
console.log(Array.prototype);
console.log(Object.prototype);

原型链

每个对象中都有一个[[prototype]]属性指向其构造函数的原型对象(一般在浏览器中是_ proto _属性)
现在有两个对象obj1,obj2。要实现obj2继承obj1。
很简单,只要让 obj2._ proto _=obj1
这里写图片描述
这样就形成了一条原型链,
在访问obj2对象的属性时,会现在obj2对象中寻找,若找到则停止寻找,返回其属性。否则会在原型链上向后寻找。
比如在访问obj的name属性时,会在obj中找到,所以返回了”obj”,它不会再去找原型链上后面的name属性了;若访问obj的age属性时,在obj中没有找到,它就会去原型链上寻找。

for in返回对象和原型链上可枚举的属性,Object提供了一种方法来访问对象本身的属性Object.getOwnPropertyNames(),此方法不会包括原型链上的属性。

//所有对象都是继承Object对象的
console.log(Number.prototype.__proto__===Object.prototype); //true
console.log(String.prototype.__proto__===Object.prototype); //true
console.log(Array.prototype.__proto__===Object.prototype);  //true
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值