Javascript 原型与原型链深入详解

目录
  • 前言
  • 对象
  • 原型
  • 原型链
  • javascript中的类
  • new的实现
  • instanceof的实现
  • javascript的继承
  • 总结

前言

在前端这块领域,原型与原型链是每一个前端 er 必须掌握的概念。多次在面试或者一些技术博客里面看见这个概念。由此可见,这个玩意对于前端来说有多重要。其实它本身理解起来不难,但是很多刚入行前端的同学,看到prototype__proto__理解起来还是有点吃力,然后脑子里面就乱成一锅粥,就像我一样。 但是这是很正常的事情,没什么大不了的,就像我们想要学会跑步,那么我们就必须先学会走路。任何事情都是有个过程的。所以现在就跟我一起来攻克这个难点吧。

通过这篇文章你将掌握以下知识点:

  • 理解 __proto_;
  • 理解 prototype;
  • 理解javascript对象的概念;
  • 理解原型和原型链;
  • 理解javascript的概念;
  • 理解new的实现;
  • 理解instanceof的实现;
  • 理解javascript的继承;
  • 加深对javascript这门语言的理解。

这也是本篇文章的写作思路。

对象

那么我们就从对象这一概念开始说起,其实对象这一概念相信大家并不陌生。有一种说法是“javasrcript 中万物皆是对象”,其实这个说法是错误的,一个很简单的例子,javasript中简单基本类型(string、boolean、number、null、undefined、symbol)本身就不是对象。其实javasript中对象主要分为函数对象普通对象

其中:

  • String
  • Number
  • Boolean
  • Object
  • Function
  • Array
  • Date
  • RegExp
  • Error

这些都是函数对象,他们同时也被称为内置对象函数对象本身其实就是一个纯函数,javascript用他们来模拟

普通对象就很简单了,就是我们常见的对象:

const obj = {
  name: "juefei",
  desc: "cool",
};

可能说到这,你还是无法理解到底啥是函数对象,啥是普通对象那我们就一起来看看下面的代码:

const obj1 = {};
const obj2 = new Object();
function func1() {}
const obj3 = new func1();
const func2 = new (function () {})();
const func3 = new Function();

接着我们来分别打印一下他们:

console.log(obj1); // object
console.log(obj2); // object
console.log(obj3); // object
console.log(func1); // function
console.log(func2); // function
console.log(func3); // function

所以可以看见,obj1obj2、,obj3是普通对象,他们都是Object的实例,而func1func2func3则都是Function的实例,称为函数对象

我们再看看:

console.log(typeof Object); //f unction
console.log(typeof Function); // function

你是不是惊呆了,原来ObjectFunction都是 Function的实例。

所以我们得出一个结论就是:

  • 只要是Function的实例,那就是函数对象,其余则为普通对象

同样我们也可以看出,不仅 Object函数对象,就连 Function本身也是函数对象,因为我们通过 console.log(typeof Function); 得知 Function是 Function的实例。是不是又开始有点绕了?没事,到这一步你就记住我们刚刚的结论就算完成目标:

  • 只要是Function的实例,那就是函数对象,其余则为普通对象

那么说到对象,我们从上面可以看出,一个对象是通过构造函数 new 出来的,这其实跟原型原型链有很大的关系,那么原型原型链到底是用来干嘛的呢?

原型

涉及到这两个概念,我们就必须先来介绍两个东西: __proto__prototype ,这两个变量可以说,在 javascript这门语言里面随处可见,我们不管他三七二十一,我们先来看一张表:

对象类型 __proto__ prototype
普通对象
函数对象

所以,请你先记住以下结论:

  • 只有函数对象有 prototype属性,普通对象没有这个属性。
  • 函数对象普通对象都有 __proto__这个属性。
  • prototype 和 __proto__都是在创建一个函数或者对象会自动生成的属性。

接着我们来验证一下:

function func() {
  //func称为构造函数
}
console.log(typeof func.prototype); // object
console.log(typeof func.__proto__); // function
const obj = {};
console.log(typeof obj.__proto__); //object
console.log(typeof obj.prototype); //undefined (看见了吧,普通对象真的没有 prototype 属性)

所以就验证了我们刚刚的结论:

  • 只有函数对象prototype属性,普通对象没有这个属性
  • 函数对象 和 普通对象都有__proto__这个属性。
  • prototype__proto__都是在创建一个函数或者对象会自动生成的属性。

你看我又重复写了一遍,我不是为了凑字数,是为了你加深记忆,这对于我们接下来的篇幅很重要。

接着我们来看看下面的代码:

console.log(obj.__proto__ === Object.prototype); // true
console.log(func.__proto__ === Function.prototype); // true

所以我们又得出如下结论:

  • 实例的__proto__属性主动指向构造的 prototype;
  • prototype属性被__proto__属性 所指向。

这就是prototype属性和__proto__属性的区别与联系。 这可能又有点绕了,来多看几遍这一节,多背一下我们的结论。我们继续。
那么问题来了,既然func是一个函数对象,函数对象是有 prototype 属性的,那么func.prototype.__proto__等于啥呢?
为了解决这个问题,我们来思考一下:
首先,我们看看func.prototype 是啥:

console.log(typeof func.prototype); //object

好,我们知道了,func.prototype是一个对象,那既然是对象,那 func.prototype那不就是 Object的实例吗?那也就是说,func.prototype.__proto__属性肯定是指向Object.prototype咯! 好,我们来验证一下:

console.log(func.prototype.__proto__ === Object.prototype); //true

看见没有,就是这样的。那看到这里,我们应该也知道当我们这创建一个构造函数的时候,javascript 是如何帮我们自动生成__proto__prototype属性的。哈哈没错就是这样:

//我们手动创建func函数
function func() {}
//javascript悄悄咪咪执行以下代码:
func._proto = Function.prototype; //实例的 __proto__ 属性主动指向构造的 prototype
func.prototype = {
  constructor: func,
  __proto: Object.prototype, //我们刚刚才在上面验证的,你别又忘记了
};

我还专门为你画了个图(够贴心不老铁):

所以prototype又被称为显式原型对象,而__proto__又被称为隐式原型对象。

hi,看到这里,你是不是有种脑子开了光的感觉。哈哈,所以到现在你应该已经理解原型的概念了,如果你还不理解,那就把上述章节再看一遍。最好拿个纸笔出来跟着画一画,顺便拿出电脑把示例代码敲一敲。好,整理一下头脑,接下来我们来看看什么又是原型链

原型链

再介绍这个概念之前,我们先来看如下代码:

function Person = function(name,desc){
    this.name = name;
    this.desc = desc;
} //***1****//
Person.prototype.getName = function(){
    return this.name;
}//***2****//
Person.prototype.getDesc = function(){
    return this.desc;
}//***3****//
const obj = new Person('juefei','cool');//***4****//
console.log(obj);//***5****//
console.log(obj.getName);//***6****//

接下来我们来逐步解析一下:

  • 创建了一个构造函数 Person,此时,Person.portotype自动创建,其中包含了constructor 和__proto__两个属性;
  • 给对象 Person.prototype新增了一个方法 getName;
  • 给对象 Person.prototype新增了一个方法 getDesc;
  • 根据构造函数Person新建一个实例: obj(在创建实例的时候,构造函数会自动执行);
  • 打印实例 obj :
{
    name: 'juefei',
    desc: 'cool'
}

根据上面一节的结论,我们得出:

obj.__proto__ = Person.prototype;
  • 执行到第 6 步时,由于在实例 obj上面找不到 getName()这个方法,所以它就会自动去通过自身的 __proto__ 继续向上查找,结果找到了Person.prototype ,接着它发现,刚好 Person.prototype 上面有getName()方法,于是找到了这个方法,它就停止了寻找。 怎么样,是不是有一种环环相扣的感觉?他们形成一个链了,没错,这就是原型链

我们得出如下结论:
在访问一个对象(假设这个对象叫 obj)的属性/方法时,若在当前的对象上面找不到,则会尝试通过obj.__proto__去寻找,而 obj.__proto__ 又指向其构造函数(假设叫objCreated)的 prototype,所以它又自动去 objCreated.prototype 的属性/方法上面去找,结果还是没找到,那么就访问 objCreated.prototype.__proto__继续往上面寻找,直到找到,则停止对原型链对寻找,若最终还是没能找到,则返回 undefined 。 一直沿着原型链寻找下去,直到找到 Object.prototype.__proto__,指向 null,于是返回 undefined了。

是不是自然而然就理解了。我又给你画了个图:

接下来我们再来增加一些概念:

  • 任何内置函数对象本身的 __proto__属性都指向 Function的原型对象,即: Function.prototype;
  • 除了 Object.prototype.__proto__指向 null ,所有的内置函数对象的原型对象的 __proto__属性 ( 内置函数对象.prototype.__proto__),都指向Object

我们得出如下终极原型链的图: 

针对这个图,我最终给出我们经常看见那个原型链的图:

好好对比一下,拿出纸和笔画一画,根据上面章节的讲解,相信你很容易就能明白。

javascript中的类

刚刚我们终于明白什么是 原型和 原型链。下面我们根据上面的概念来讲解一下javascript中的。 我们知道,在面向对象的语言中,类可以被实例化多次,这个实例化是指我们可以根据构造函数去独立复制多个独立的实例,这些实例之间是独立的。但是实际上在 javascript却不是这样的,因为它不是这种复制机制。我们不能创建一个类的多个实例,我们只能创建这个类的多个对象,因为他们都是通过原型原型链关联到同一个对象。所以在 javascript中 ,都是通过原型原型链来实现的,它其实是一种委托方式

new的实现

了解了上面javascript中的的概念,那我们应该很容易就理解new的过程,其核心无非就是执行原型链的链接:

function myNew(Cons, ...args) {
  let obj = {};
  obj.__proto__ = Cons.prototype; //执行原型链接
  let res = Cons.call(obj, args);
  return typeof res === "object" ? res : obj;
}

instanceof的实现

那么学习了原型原型链instanceof的实现肯定也很简单了,它也是通过原型原型链来实现的:

function myInstanceof(left, right) {
  let rightProto = right.prototype;
  let leftValue = left.__proto__;
  while (true) {
    if (leftValue === null) {
      return false;
    }
    if (leftValue === rightProto) {
      return true;
    }
    leftValue = leftValue.__proto__;
  }
}

我就不讲解过程了,因为我知道你肯定能看懂,哈哈。

javascript的继承

我们都知道继承也是通过原型原型链来实现的,那我在这里介绍两种常见的继承方式:

组合继承:

//组合式继承
//通过call继承Parent的属性,并传入参数
//将Child的原型对象指向Parent的实例,从而继承Parent的函数
function Parent(value) {
  this.val = value;
}
Parent.prototype.getValue = function () {
  console.log(this.val);
};
function Child(value) {
  Parent.call(this, value); //继承Parentd的属性
}
Child.prototype = new Parent();

寄生组合式继承:

//寄生组合式继承
//通过call继承Parent的属性,并传入参数
//通过Object.create()继承Parent的函数
function Parent(value) {
  this.val = value;
}
Parent.prototype.getValue = function () {
  console.log(this.val);
};
function Child(value) {
  //继承Parentd的属性
  Parent.call(this, value);
}
Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    writable: true,
    configurable: true,
    enumerable: false,
  },
});

总结

  • 若 A 通过 new 创建了 B,则 B.__proto__ = A.prototype
  • 执行B.a,若在 B 中找不到 a,则会在B.__proto__中,也就是A.prototype中查找,若A.prototype中仍然没有,则会继续向上查找,最终,一定会找到Object.prototype,倘若还找不到,因为Object.prototype.__proto__指向null,因此会返回undefined
  • 原型链的顶端,一定有 Object.prototype.__proto__ ——> null。

由此可见,原型原型链是如此的强大

到此这篇关于Javascript 原型与原型链深入详解的文章就介绍到这了,更多相关Javascript 原型链内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript 原型与原型链详情

    目录 1.prototype(显式原型) 2.__proto__(隐式原型) 3.constructor(构造函数) 4.new的原理 5.原型链 5.1 原型链的作用 5.2 构造函数的__proto__是什么呢? 6.总结 前言: JavaScript常被描述为一种「基于原型的语言」--每个对象都拥有一个「原型对象」,对象以其原型为模板.从原型继承属性和放法.原型对象也可能拥有原型,并从中继承属性和方法,一层一层以此类推.这种关系常被称为「原型链」,它解释了为何一个对象会拥有定义在其他对象中

  • JavaScript两张图搞懂原型链

    目录 1.原型的关系 2.原型链 3.结语 前言: 我们上一篇文章介绍了JavaScript原型,为什么不将原型链一起介绍了呢?因为JavaScript中的原型链是一个难点,也是一个面试必问的考点,现在就来学习一下. 1.原型的关系 在JavaScript中的每个函数都会有一个prototype属性,这个属性又会返回一个原型,原型又有一个constructor属性,这个属性指向与之关联的构造函数.通过构造函数实例化的对象会有一个__proto__属性,这个__proto__属性指向与构造函数的p

  • JS精髓原型链继承及构造函数继承问题纠正

    目录 前言 原型链继承 构造函数继承 组合继承 前言 先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用! 咱常说,面向对象三大特点,封装.继承.多态. 这三个特点,以“继承”为核心.封装成类,是为了继承,继承之后再各自发展(重写),可理解为多态.所以,根本目的是为了继承,即“复用“! 如果你用 JavaScript 面向对象的能力来编程的话,能想到的,也只供使用的就是:基于原型. 因为这门语言设计就是这样,我们之前也提过:JavaScript的语言设计主要受到了Self(一种基于

  • javascript原型链图解的总结和实践

    目录 原型链 我们可以基于原型链来实现一个简易的JQuery库 总结 原型链 在ES6中引入了class关键字,但是JS依然是基于原型的,class实际上是语法糖. 举个例子,有一个people class: class People { constructor(props) { this.name = props.name; } run() { console.log('run') } } 通过new people 这个class 产生了许多的人,张三,李四: let lisi = new P

  • 一文详解如何用原型链的方式实现JS继承

    目录 原型链是什么 通过构造函数创建实例对象 用原型链的方式实现继承 方法1:Object.create 方法2:直接修改 [[prototype]] 方法3:使用父类的实例 总结 今天讲一道经典的原型链面试题. 原型链是什么 JavaScript 中,每当创建一个对象,都会给这个对象提供一个内置对象 [[Prototype]] .这个对象就是原型对象,[[Prototype]] 的层层嵌套就形成了原型链. 当我们访问一个对象的属性时,如果自身没有,就会通过原型链向上追溯,找到第一个存在该属性原

  • 深入了解javascript原型和原型链

    目录 一.什么是原型 二.prototype 三.__proto__ 四.constructor 五.实例与原型 六.原型的原型 七.原型链 一.什么是原型 原型:每一个javascript对象(除null外)创建的时候,都会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中"继承"属性. 例如 var obj = new Object(); 创建一个对象的时候都会同时关联一个对象,如图,关联的这个对象就是新建的对象obj的原型 二.prototype 在JavaS

  • JavaScript原型链详解

    目录 1.构造函数和实例 2.属性Prototype 3.属性__proto__ 4.访问原型上的方法 5.构造函数也有__proto__ 6.构造函数的原型也有__proto__ 7.Object.prototype这个原型对象很特殊 8.总结 1.构造函数和实例 假设你声明一个方法叫做Foo() ,那么我们可以通过new Foo()来声明实例. function Foo() { console.log("我是一个构造方法"); } const f1 = new Foo(); 现在你

  • JavaScript设计模式之职责链模式详解

    目录 职责链模式 1. 现实中的职责链模式 2. 实际开发中的职责链模式 3. 用职责链模式重构代码 4. 灵活可拆分的职责链节点 5. 异步的职责链 6. 职责链模式的优缺点 7. 用 AOP 实现职责链 8. 小结 职责链模式 职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇

  • javascript 作用于作用域链的详解

    javascript 作用于作用域链的详解 一.JavaScript作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域: (1)最外层函数和在最外层函数外面定义的变量拥有全局作用域, 例如: var authorName="Bu

  • JavaScript原型及原型链终极详解

    JavaScript原型及原型链终极详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象.下面举例说明 function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); var o3 = new f1(); var o1 = {}; var o2 =new Object()

  • JavaScript原型继承和原型链原理详解

    这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间.同时还可以向构造函数传递参数,十分的方便. 这里还要再讲一下两种特色的构造

  • JavaScript对象原型链原理详解

    这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个js对象,除了自己设置的属性外,还会自动生成proto.class.extensible属性,其中,proto属性指向对象的原型. 对象的属性也有writable.enumerable.configurable.value和get/set的配置方法. 对象的创建方式有三种: 一.使用字面量直接创建. 二.基于原型链创建. 分析上图,要点如

  • Javascript 原型与原型链深入详解

    目录 前言 对象 原型 原型链 javascript中的类 new的实现 instanceof的实现 javascript的继承 总结 前言 在前端这块领域,原型与原型链是每一个前端 er 必须掌握的概念.多次在面试或者一些技术博客里面看见这个概念.由此可见,这个玩意对于前端来说有多重要.其实它本身理解起来不难,但是很多刚入行前端的同学,看到prototype.__proto__理解起来还是有点吃力,然后脑子里面就乱成一锅粥,就像我一样. 但是这是很正常的事情,没什么大不了的,就像我们想要学会跑

  • JavaScript设计模式之原型模式和适配器模式示例详解

    目录 原型模式 原型模式介绍 代码实现 适配器模式 适配器模式介绍 代码实现 小结 原型模式 原型模式介绍 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性 实现原型模式是在ECMAScript5中,提出的Object.create方法,使用现有的对象来提供新创建的对象的__proto__. 代码实现 var lynkCoPrototype = { model: "领克", get

  • Javascript的无new构建实例详解

    看jquery源代码第一步的时候,对于jquery对象的创建就看的云里雾里,琢磨半天终于有点感觉了,在此记录下 第一种方式: var A = function(){ return A.prototype.init(); } A.prototype = { init:function(){ this.age = 50; console.log(this); return this; }, age:100 } console.log(A() === new A()); 1.分析下结果为什么为true

  • JavaScript 语句之常用 for 循环详解

    JavaScript中循环语句不少,for.for in.for of和forEach循环,今天对比Array.Object.Set(ES6).Map(ES6)四种数据结构循环语句支持的情况及区别. 新建四种数据类型的测试数据 let arr = [1, 2, 3, 4, 5, 6]; let obj = { a: 1, b: 2, c: 3 }; let map = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]); let set = new

  • JavaScript数组reduce()方法使用实例详解

    目录 前言 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平 总结 前言 今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.reduce(reducer) reduce是数组原型对象上的一个方法,可以帮助我们操作数组.它将另一个函数作为其参数,可以称为reducer. reducer

随机推荐