js-原型&&原型链理解

简介: js-原型&&原型链理解

## 一、原型

> 1.所有`引用类型`都有一个`__proto__(隐式原型)`属性,属性值是一个普通的对象

> 2.所有`函数`都有一个`prototype(原型)`属性,属性值是一个普通的对象

> 3.所有`引用类型的__proto__`属性`指向`它`构造函数的prototype`

```

var a = [1,2,3,4,5,6];

a.__proto__ === Array.prototype; // true

```

## 二、原型链

> 当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的`__proto__`隐式原型上查找,即它的构造函数的`prototype`,如果还没有找到就会再在构造函数的`prototype`的`__proto__`中查找,这样一层一层向上查找就会形成一个链式结构,我们称为`原型链`。

举例,有以下代码

```

function Parent(month){

   this.month = month;

}

var child = new Parent('dong');

console.log(child.month); // dong

console.log(child.year); // undefined

```

在child中查找某个属性时,会`执行下面步骤`:

![这里写图片描述](https://upload-images.jianshu.io/upload_images/6946912-339f149a0c766118?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`访问链路`为:

![这里写图片描述](https://upload-images.jianshu.io/upload_images/6946912-3d21506b44030989?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> ①一直往上层查找,直到到null还没有找到,则返回`undefined`

> ②`Object.prototype.__proto__ === null`

> ③所有从原型或更高级原型中的得到、执行的方法,其中的this在执行时,指向当前这个触发事件执行的对象


目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
25天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
4月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
31 0
|
1月前
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么?
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合,构建了一个从对象到`Object.prototype`的链式结构,实现了对象之间的继承、属性共享和动态扩展等功能,为 JavaScript 的面向对象编程提供了强大的支持。
|
1月前
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么?
原型链是 JavaScript 中实现面向对象编程的重要机制之一,它为代码的组织、复用、扩展和多态性提供了强大的支持,使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链,对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
|
1月前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
32 1
|
2月前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
29 0
|
2月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
36 0
|
2月前
|
JavaScript 前端开发 安全
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
30 0