1.Javascript中所有的对象都是Object的实例,并继承Object.prototype的属性和方法,也就是说,Object.prototype是所有对象的爸爸。(个人感觉搞清楚这一点很重要) 。

在对象创建时,就会有一些预定义的属性,其中定义函数的时候,这个预定义属性就是prototype,这个prototype是一个普通的对象。

而定义普通的对象的时候,就会生成一个__proto__,这个__proto__指向的是这个对象的构造函数的prototype.

详情请看例一:(建议大家用谷歌浏览器查看这些对象的属性);

function A(a){
  this.a = a;
}
首先定义一个函数a,如上面所说,函数在被定义的时候就拥有了一个prototype对象。我们来打印看一下

console.log(A.prototype)
浏览器的结果:

如上图,这就是函数a的prototype对象,(记住我们最开始说的,凡是对象都会有一个属性那就是__proto__)。这个__proto__指向的就是他的构造函数的prototype 而这个函数a的prototype对象的构造函数是谁呢? 没错就是开头说到的Object.prototype。

看如下代码:

console.log(A.prototype.__proto__)
console.log(Object.prototype)
而这两个的结果如下:

打印出来是同一个东西,也就是说Object.prototype是所有函数的爹,当你声明一个函数的时候也就是相当于对Object的实例化。这里可以对比一下new一个实例。

我们也可以用几个方法来验证一下:

console.log(Object.prototype.isPrototypeOf(A))//true
console.log(A instanceOf Object) //true

函数a的prototype对象的另一个属性是constructor这个属性就指向了函数a本身,也就是指向了他自己的构造函数。

2.我们在来用一个实例对象来说明一下原型,代码如下:

function B(b){

  this.b = b;
}
var b = new B('lc');
当我们声明一个函数B时就自动创建了prototype对象。而b是构造函数的B的实例,这时候b是一个对象,而我们知道,对象只有__proto__属性。而这个属性是指向他的构造函数(B)的prototype属性。这时候我们来打印一下b

console.log(b)

可以看到b中只有__proto__属性,而这个属性是指向他的构造函数的prototype对象的,也就是说

(b.__proto__==B.prototype)答案为true;

这就是js中的prototype和__proto__的区别。

那么什么是原型链呢?接着上面的讲,我们都知道对象都有一个toString方法。上述的实例化对象b也可以toString,

而实例化对象b本身并没有toString的方法,那他就会沿着它的__proto__向他的构造函数B的prototype对象去找,而这里也没有,那他就会 继续沿着B.prototype.__proto__向上找。而B.prototype.__proto__指向的就是Object.prototype。

我们打印一下Object.prototype:

这就是原型链查找,而则一层一层的链接 关系就是原型链。
---------------------
原文:https://blog.csdn.net/lc237423551/article/details/80010100

js __proto__ 和prototype的联系的更多相关文章

  1. js - __proto__ 、 prototype和constructor

    零.资料与前言 0x1 材料: 1.帮你彻底搞懂JS中的prototype.__proto__与constructor(图解) 0x2 前言 之前也尝试总结过 js 中的 __proto__ . pr ...

  2. js中的prototype和__proto__

    var Person = function(name){ this.name = name; this.say = function(){ return "I am " + thi ...

  3. js中__proto__和prototype的区别和关系?

    _proto__(隐式原型)与prototype(显式原型)1.是什么 显式原型 explicit prototype property: 每一个函数在创建之后都会拥有一个名为prototype的属性 ...

  4. 说一说js中__proto__和prototype以及原型继承的那些事

    在面试中遇到过,问js如何实现继承,其实最好的方式就是构造函数+原型,今天在讨论中,发现自己以前理解上的一些误区,特地写出来,最近都比较忙,等手上的项目做完,可以来做个总结. 先说我以前没有认识到位的 ...

  5. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  6. js 原型链 prototype __proto__

    1.说明 函数(Function)才有prototype属性,对象(除Object)拥有__proto__. 2.prototype与__proto__区别 示例: <!DOCTYPE html ...

  7. JS的__proto__与prototype

    一.prototype和__proto__的概念 prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象.它是显示修改对象的原型的属性. __p ...

  8. JS中的prototype、__proto__与constructor属性

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  9. 实践一些js中的prototype, __proto__, constructor

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

随机推荐

  1. shell脚本基础和grep文本处理工具企业应用3

    文本处理工具:    linux上文本处理三剑客        grep,egrep,fgrep:文本过滤工具(模式:pattern)工具            grep:默认支持的是基本正则表达式: ...

  2. python中的函数def和函数的参数

    '''函数: 1.减少代码重用性 2.易维护 3.可扩展性强 4.类型function 定义函数: def 函数变量名(): 函数的调用: 1.函数名加括号 2.函数如果没被调用,不会去执行函数内部的 ...

  3. Rectangle Puzzle CodeForces - 281C (几何)

    You are given two rectangles on a plane. The centers of both rectangles are located in the origin of ...

  4. Numpy 文件读写

    NumPy 文件读写主要有二进制的文件读写和文件列表形式的数据读写两种形式 二进制的文件读写 save  np.save ("./文件名", 数组名):以二进制的格式保存数据 保存 ...

  5. 将 对象序列化与反序化 (json格式)

    实体类 package com.nf.redisDemo1.entity; public class News { private long id; private String title; pri ...

  6. react入门及简单配置

    直接script引入的不说了 1.npm i -g create-react-app 2.create-react-app my-app (其中my-app为项目名称) 3.进入项目cd my-app ...

  7. 《剑指offer》算法题第十天

    今日题目: 数组中的逆序对 两个链表的第一个公共节点 数字在排序数组中出现的次数 二叉搜索树的第k大节点 字符流中第一个不重复的字符 1. 数组中的逆序对 题目描述: 在数组中的两个数字,如果前面一个 ...

  8. H5 设计尺寸

    750*1218 微信下 兼容 7plus 内容高度 居中 1000px 内 750*1448 微信下 兼容 iphoneX 微信导航栏高度 64px 64px =  导航栏44+状态栏20 但是现在 ...

  9. c++回溯法求组合问题(取数,选取问题)从n个元素中选出m个的回溯算法

    假如现在有n个数,分别从里面选择m个出来,那么一共有多少种不同的组合呢,分别是哪些呢? 利用计算机的计算力,采用回溯算法很容易求解 程序源代码如下: #include<iostream># ...

  10. js对象及初识面向对象(4)

    一.什么是对象? 对象是包含了属性和方法的集合体 二.什么是面向对象? 面向对象是一种编程思想,在JS当中利用原型来阐述这种思想的编程方法 三.构建对象: 1.内置对象: String   Math  ...