JS原型、原型链深入理解

原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有”prototype”属性，函数对象有”prototype”属性，原型对象有”constructor”属性。

一、初识原型
在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”内部属性，这个属性所对应的就是该对象的原型。
“[[Prototype]]”作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome中提供了__proto__这个非标准（不是所有浏览器都支持）的访问器（ECMA引入了标准对象原型访问器”Object.getPrototype(object)”）。在JavaScript的原型对象中，还包含一个”constructor”属性，这个属性对应创建所有指向该原型的实例的构造函数

二、规则
在JavaScript中，每个函数 都有一个prototype属性，当一个函数被用作构造函数来创建实例时，这个函数的prototype属性值会被作为原型赋值给所有对象实例（也就是设置 实例的`__proto__`属性），也就是说，所有实例的原型引用的是函数的prototype属性。(****`只有函数对象才会有这个属性!`****)

new 的过程分为三步

?


1

var p = new Person(‘张三‘,20);

1. var p={}; 初始化一个对象p。
2. p._proto_=Person.prototype;，将对象p的 __proto__ 属性设置为 Person.prototype
3. Person.call(p,”张三”,20);调用构造函数Person来初始化p。关于call/apply使用

三、初识Object
Object对象本身是一个函数对象。(CODE TEST) 既然是Object函数，就肯定会有prototype属性，所以可以看到”Object.prototype”的值就是”Object {}”这个原型对象。反过来，当访问”Object.prototype”对象的”constructor”这个属性的时候，就得到了Obejct函数。
另外，当通过”Object.prototype._proto_”获取Object原型的原型的时候，将会得到”null”，也就是说”Object {}”原型对象就是原型链的终点了。
四、初识Function
如上面例子中的构造函数，JavaScript中函数也是对象，所以就可以通过_proto_查找到构造函数对象的原型。
Function对象作为一个函数，就会有prototype属性，该属性将对应”function () {}”对象。
Function对象作为一个对象，就有__proto__属性，该属性对应”Function.prototype”，也就是说，”Function._proto_ === Function.prototype”。

在这里对“prototype”和“proto”进行简单的介绍：
对于所有的对象，都有__proto__属性，这个属性对应该对象的原型.
对于函数对象，除了__proto__属性之外，还有prototype属性，当一个函数被用作构造函数来创建实例时，该函数的prototype属性值将被作为原型赋值给所有对象实例（也就是设置实例的__proto__属性）

原型链结构图

原型链
因为每个对象和原型都有原型，对象的原型指向原型对象，
而父的原型又指向父的父，这种原型层层连接起来的就构成了原型链。

一、属性查找
当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止，到查找到达原型链的顶部（也就是 Object.prototype），如果仍然没有找到指定的属性，就会返回 undefined。

?


1

2

3

4

5

6

7

8

9

function Person(name, age){

    this.name = name;

    this.age = age;

  }

Person.prototype.MaxNumber = 9999;

Person.__proto__.MinNumber = -9999;

var will = new Person("Will", 28);

console.log(will.MaxNumber); // 9999

console.log(will.MinNumber); // undefined

在这个例子中分别给”Person.prototype “和” Person.proto”这两个原型对象添加了”MaxNumber “和”MinNumber”属性，这里就需要弄清”prototype”和”proto”的区别了。

“Person.prototype “对应的就是Person构造出来所有实例的原型，也就是说”Person.prototype “属于这些实例原型链的一部分，所以当这些实例进行属性查找时候，就会引用到”Person.prototype “中的属性。

对象创建方式影响原型链

?


1

2

3

4

5

6

7

8

var July = {

   name: "张三",

   age: 28,

   getInfo: function(){

     console.log(this.name + " is " + this.age + " years old");

   }

 }

console.log(July.getInfo());

当使用这种方式创建一个对象的时候，原型链就变成下图了. July对象的原型是”Object.prototype”也就是说对象的构建方式会影响原型链的形式。

{}对象原型链结构图

综图所述
1. 所有的对象都有__proto__属性，该属性对应该对象的原型.
2. 所有的函数对象都有prototype属性，该属性的值会被赋值给该函数创建的对3. 象的_proto_属性.
4. 所有的原型对象都有constructor属性，该属性对应创建所有指向该原型的实例的构造函数.
5. 函数对象和原型对象通过prototype和constructor属性进行相互关联.

时间： 2024-07-29 04:05:51

JS原型、原型链深入理解的相关文章

前端基本知识：JS的原始链的理解

一.JS的原型链理解方式 二.原型理解 三.规则 四.js常见的创建对象的各种方法 一.原始链理解方式 每一次原型链理解起来很费劲,而且经常容易出错,或者解释的不到位. 1.什么是对象实例,什么是原型(对象)? 2.什么是构造函数? 3.通过原型对象找到构造函数 4.原型的唯一性 5.原型链 6.原型链最终指向为null 7.继承 8.原型链的继承 9.原型链的向上搜索 10.对象的属性可以自定义 11.对象实例不能改动原型属性 12.原型属性的共享 13.原型的动态性 14.原型的重写 我去,

前端基本知识（二）：JS的原型链的理解

之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这个问题,但是不知道使用的是什么一种方法,方法的原理是什么,现在觉得大学里学习的基本知识还是很重要的,一定有自己的理解才能走的更远. 无论以后自己的学习新的技术,但是万变不离其宗,基本扎实,学习效率高. 废话这么多,开始了今天理解的四部分部分. 一.JS的原型链理解方式 二.原型理解 三.规则 四.j

怎么理解js的原型链继承？

前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js的继承关系,需要借助于原型链.之前的文章,我有讲过原型和原型链的概念.在这,再重新回顾一下. js中万物皆对象,每个对象都有一个隐式原型 __proto__ ,指向创建它的构造函数的原型对象. 函数(构造函数)除了有一个隐式原型对象,还有一个属性prototype,它指向一个对象,这个对象就是原型对

对原型链的理解 语言表达能力不好 直接用代码，哈

分享一下 我对原型和原型链的理解 原型对象: function People(nameValue,ageValue,fondValue)            {                this.name = nameValue;                this.age = ageValue;                this.fond = fondValue;            } People.prototype.rule = function()         

原型链的理解

### 原型链的理解 #### 概念 + javascript每一个对象**包括原型对象**都有一个内置的`proto`属性指向创建他的函数对象的原型对象,即`prototype`属性 #### 作用 + 实现对象的继承 ### 理解 1.函数对象 + 在javascript中,函数就是对象 2.原型对象 + 当定义一个函数对象的时候,会包含一个预定的属性,`prototype`,这就属性称之为原型对象 3.\__proto__ + javascript 在创建对象的时候,都会有一个\_prot

面向对象（2 ）构造函数 原型 原型链的理解

面向对象(2) 原型 原型链的理解 1.面向对象的目的就是生成对象object. 2.生成对象的方式 (1)单例模式(字面量定义)var obj={} (2)类的实例 var obj=new Object() (3)工厂模式 (4)构造函数 工厂模式和构造函数的区别? 工厂模式,生成的对象必须要返回,构造函数模式不用return,构造函数模式默认return旳是this,在构造函数内的this就是实例对象. 构造函数如果人为return的不是对象,直接忽略,如果人为return的是对象,就取代t

原型原型链理解

由来 js是基于原型的语言,没有类的概念,为了描述联系对象和对象之间的关系就有了原型和原型链. 原型 原型(prototype)就是模板,本质也是一个对象,它定义了构造函数构造出来的对象可以继承该原型的属性和方法,用于表示对象之间的关系.每个函数都有一个prototype属性,这个属性指向的就是原型对象:实例上有一个__proto__指向它的构造函数的原型对象. 特点 prototype只有函数有,对象没有 原型链 定义 每个对象上拥有一个__proto__属性指向原型对象,对象以其原型为模板,

Js的原型理解

Js的原型一直都是新手困惑的东西 原型也是Js强大的功能之一, 在面向对象编程里, 原型是必不可少的环节 我们知道Js有五种基本类型: String, Number, Boolean, undefined和null 还有三种引用类型: Array, Object, Function 而对于array类型, 也有join, reverse, pop, shift等方法供我们调用 类似于这样: let arr = []; 空空的数组,可是为什么会有方法供我们调用呢? 这里就是原型了. 每一个Js对象

JavaScirpt中的原型,原型对象和原型链

一.什么是原型呢? 我们创建每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象.(即prototype即为函数的原型该原型指向的是一个原型对象) 二.什么是原型对象呢? 我们创建每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象(即原型对象).而这个对象的用途是包含 可以由特定类型的所有 实例 共享的属性和方法.(字面意思prototype就是通过调用构造函数而创建的实例对象的原型对象) 使用原型对象的好处是可以让所有的对象实例(实

原型&&原型链一语道破梦中人

一直对原型和原型链模模糊糊,今天看到一句话,通过这句话再结合我目前对原型和原型链的理解算是让我对原型和原型链有一个更清醒的认识;并且记忆更加深刻; 任何一个对象都有一个隐式原型:__proto__属性; 一个对象的隐式原型===该对象的构造函数的原型; 用代码翻译一下: var obj= new Object(); obj.__proto__===obj.constructor.prototype;  //true; 原文地址:https://www.cnblogs.com/hylCodeHou