prototype链

javascript语言的灵魂部分,面向对象编程的依据。先看下面的例子:

 

Object.prototype.inObj = 1;
 
function A(){
    this.inA = 2;
}
A.prototype.inAProto = 3;
function B(){

         // 对象冒充方式实现继承

         A.call(this);
      this.inB = 4;
}

// 原型链方式实现继承
B.prototype = new A(); 


// 文章javascript Constructor提到过的手动维护的constructor属性

B.prototype.constructor = B;


B.prototype.inBProto = 5;

x = new B();
document.write(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto);

下面给出原型链结构图:

当我们调用x的一个属性时,如x.inObj,首先看x对象中有没有此属性,如果没有就依照原型链找B.prototype中有没有,依次类推直到找Object.prototype为止。原型链的终点是Object.prototype指向的null,

大家从此图可以得出一个规律,隐式变量__proto__的起点是终点的去掉prototype的实例,我之所以不说是终点的constructor属性的实例,是因为constructor是可以手动维护的,先前也提到过,我个人觉的它没什么用。(如有不同看法,请拍砖)。

网上有好多人搞不清Function 和Object的关系,通过以上规律,由此图可以看出Object的构造函数是Function,也就是Object是Function的实例,而Function的构造函数是它自己。

### JavaScript 原型与 `prototype` 属性详解 #### 一、原型工作原理 在 JavaScript 中,每个对象都有一个内部接指向另一个对象,这个被接的对象被称为其原型。当尝试访问某个对象的属性时,如果该对象本身不存在此属性,则会沿这条向上查找,直至找到该属性或到达原型顶端——即 `null`,这便是所谓的原型机制[^1]。 #### 二、`prototype` 属性的作用 对于函数而言,在创建它们的同时也会自动为其分配一个名为 `prototype` 的公共属性。这是一个特殊的对象,用于存储可由通过调用该构造器实例化出来的所有对象所共享的方法和属性。每当基于此类构造器新建一个实例时,这些新实体都会隐式地将其自身的 [[Prototype]] 接到对应的 `prototype` 上[^2]。 ```javascript function Person(name) { this.name = name; } Person.prototype.sayHello = function () { console.log(`Hello, my name is ${this.name}`); }; const personA = new Person('Alice'); personA.sayHello(); // 输出 "Hello, my name is Alice" ``` 上述代码展示了如何利用 `prototype` 来定义可供多个实例共用的行为逻辑,而无需重复声明相同的成员于每一个单独的对象内。 #### 三、最佳实践建议 为了避免因过长的原型而导致不必要的性能损耗,应当注意控制继承层次的数量并确保必要的时候才引入额外的中间环节。此外,修改现有类型的原生 `prototype` 可能会影响到整个应用程序环境下的其他部分依赖于此类型的地方,故应谨慎行事[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值