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();

现在你可以很清晰的明白Foo()是构造函数,f1是它的实例。

2、属性Prototype

Foo()这个构造函数是一个方法。

方法也是对象数据类型,所以可以说方法是个对象。

对象就有属性,不过方法有自己特殊的一个属性,叫做prototype,其他对象没有哦。

这个属性会指向一个原型对象(Foo.prototype),而原型对象也会有一个自己的属性叫做constructor,指向属性包含了一个指针,指回原构造函数。

   function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();

    console.log(Foo.prototype);//Foo的原型对象
    console.log(f1.prototype);//f1没有 underfied

3、属性__proto__

上文的prototype是给构造函数的所有实例提供共享方法和属性的。

实例又是怎么访问到共享方法和属性的呢?

f1实例没有prototype,而有一个属性__proto__,这是所有对象都有的属性,它指向到构造自己的构造函数的原型对象,然后js这个语言就是根据这个属性来让实例访问到共享属性和方法的

Foo是f1的构造函数,Foo.prototypeFoo的原型对象,所以f1.__proto__指向Foo.prototype

    function Foo() {
      console.log("我是一个构造方法");
    }

    const f1 = new Foo();

    console.log(Foo.prototype);
    console.log(f1.__proto__);

4、访问原型上的方法

Foo这个构造函数如果希望自己的实例能够拥有同一个属性,比如name,就在自己的原型对象上加上。

   function Foo() {
      console.log("我是一个方法");
    }

    Foo.prototype.name = "我是Foo创造的实例共享的属性";

    const f1 = new Foo();
    const f2 = new Foo();

    console.log(f1.name);//我是Foo创造的实例共享的属性
    console.log(f2.name);//我是Foo创造的实例共享的属性

5、构造函数也有__proto__

上面说所有对象都有__proto__ ,Foo是函数也是对象啊,所以Foo.__proto__是啥呢?

那就去找Foo的构造函数是谁呢,Foo是一个函数,拥有函数特有的方法和属性,创造的它的构造函数就是Function,这个js自带的的一个构造函数,它的Function.prototype给所有js中你创建的函数提供函数自带的一些公共方法和属性。

所以Foo.__proto__指向Funtion.prototype

6、构造函数的原型也有__proto__

Foo.prototype也是对象,所以它也有__proto__。

每当我们要找__proto__,就得找它的构造函数,Foo.prototype是个对象,纯对象,所以它的构造函数是Object,那么Object的原型就是Object.prototype。

Foo.prototype.__proto__指向Object.prototype

7、Object.prototype这个原型对象很特殊

ArrayStringFuntionObject这些构造函数都是函数,
都是Funtion构造函数的实例,
Array.__proto__String.__proto__Funtion.__proto__ Object.__proto__指向Funtion.prototype原型,
可以调用Funtion.prototype原型的一些公共方法,
例如都可以调用.name查看自己的函数名字。

Array.prototypeString.prototypeFuntion.prototype这些原型对象都是对象,
都是Object构造函数的实例,
Array.prototype.__proto__ String.prototype.__proto__Funtion.prototype.__proto__指向Object.prototype原型,
所以可以调用Object.prototype这个原型对象的公共方法,

Object.prototype有些特殊,它虽然是对象,但是并不是Object自己的实例,
Object.prototype.__proto__指向null,作为原型链的终点

8、总结

方法,也就是函数,才有prototype,就是方法的原型。
所以实例,一般都会有个对应的构造方法,也就是构造函数,实例的__proto__指向构造方法的原型。
js有很多自带的构造方法,例如ArrayStringFuntionObject,都是根据js一些对象类型分配的,他们的原型上提供了许多封装好的常用方法。
所有构造方法本身是函数,是Funtion这个js自带构造函数的实例。
除了Object.prototype,所有构造方法的原型本身是对象,是Object这个js自带构造函数的实例。
Object.prototype.__prototype指向null,作为原型链终点。

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

(0)

相关推荐

  • JavaScript 原型与原型链详情

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

  • 彻底理解JavaScript的原型与原型链

    目录 前言 基础铺垫 prototype contructor属性 __proto__ 原型链 提高 总结 后语 前言 原型与原型链知识历来都是面试中考察的重点,说难不算太难,但要完全理解还是得下一定的功夫.先来看一道面试题开开胃口吧: function User() {} User.prototype.sayHello = function() {} var u1 = new User(); var u2 = new User(); console.log(u1.sayHello === u2

  • 一篇文章让你搞懂JavaScript 原型和原型链

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网 与多数面向对象的开发语言有所不同,虽然JavaScript没有引入类似类的概念(ES6已经引入了class语法糖),但它仍然能够大量的使用对象,那么如何将所有对象联系起来就成了问题.于是就有了本文中我们要讲到的原型和原型链的概念. 原型和原型链作为深入学习JavaScript最重要的概念之一,如果掌握它了后,弄清楚例如:JavaScript的继承,new关键字的原来.封装及优化等概念将变得不在话下,那么下面我们开始关于原型和原型链的介绍

  • 详解JavaScript原型与原型链

    正如一些面向对象语言中所实现的那样,在JavaScript中我们有时也需要创建一个拥有公共函数与属性的类作为父类来减少代码重复.实现类型检查与实现更加清晰地代码结构.在JavaScript中,继承是通过原型链实现的.了解JavaScript的继承与原型链之前首先需要了解JavaScript中对象创建的方式. 在JavaScript中创建对象 JavaScript中对象创建的方式有两种:工厂方法(Factory Functions).构造器方法(Constructor Functions) . 工

  • JS难点同步异步和作用域与闭包及原型和原型链详解

    目录 JS三座大山 同步异步 同步异步区别 作用域.闭包 函数作用域链 块作用域 闭包 闭包解决用var导致下标错误的问题 投票机 闭包两个面试题 原型.原型链 原型对象 原型链 完整原型链图 JS三座大山 同步异步 前端中只有两个操作是异步的: 定时器异步执行; ajax异步请求 编译器解析+执行代码原理: 1.编译器从上往下逐一解析代码 2.判断代码是同步还是异步 同步:立即执行 异步:不执行.放入事件队列池 3.等所有同步执行完毕开始执行异步 同步异步区别 api : 异步有回调,同步没有

  • 全面解析js中的原型,原型对象,原型链

    理解原型 我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.看如下例子: function Person(){ } Person.prototype.name = 'ccc' Person.prototype.age = 18 Person.prototype.sayName = function (){ console.log(this.name); } var person1 = ne

  • 浅谈JS的原型和原型链

    1.原型prototype javascript中所有函数都具有这个属性,所有具有prototype属性的对象都是一个函数.prototype的作用是向对象添加一个方法/属性. function persion(){} persion.prototype.name = "xiaoming" console.log(persion.prototype)//{name: "xiaoming", constructor: ƒ} 2.原型指针:__proto__ 如果将上面

  • 图解JS原型和原型链实现原理

    在我初学 JS 语言的继承机制原型和原型链的时候,我一直理解不了这种设计机制,再加上之前原有对 Java继承的理解,在学习 JS 继承机制的设计上踩了一个大坑,很多知识点前期都是死记硬背,无法真正的理解它的设计思想. JS 中的继承机制思想可以说是学习 JS 的一个核心思想,更可以说是 JS 中的一个命脉,往往这些复杂.抽象的继承关系,以及专业术语.代名词确成为了困扰初学者的绊脚石.当我真正理解它的设计思想时,其实并没有那么复杂,而且觉得非常简单. 在写这篇 JS 的原型和原型链的文章之前,我在

  • 带你理解JavaScript 原型原型链

    目录 一.原型.原型链相等关系理解 二:原型.原型链的意思何在 看完这篇文章,你会发现,原型.原型链原来如此简单!  上面经典的原型链相等图,根据下文的学习,你会轻易掌握. 一.原型.原型链相等关系理解 首先我们要清楚明白两个概念: js分为函数对象和普通对象,每个对象都有__proto__属性,但是只有函数对象才有prototype属性 Object.Function都是js内置的函数, 类似的还有我们常用到的Array.RegExp.Date.Boolean.Number.String 这两

  • 五句话帮你轻松搞定js原型链

    原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象,即prototype属性. 作用:原型链的存在,主要是为了实现对象的继承. 一. 记住以下5句话,轻松搞定js原型链 Function 和 Object 都是构造函数 所有的构造函数都是Function new出来的(Function自己new了自己):所有的原型对象都是Object new出来的(Object new了自己的原型对象) 每一个构造函数都有一个pro

随机推荐