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. java 权限控制

    网上或参考书中,对于java权限控制大多给出一张看似很整齐很好记实则不好理解的表格,我整理了一个2.0升级版,自认为会好理解很多,希望可以有所帮助. 同一包内 不同包内 修饰符 当前类 非当前类(含子 ...

  2. Date 对象

    JavaScript Date 对象 Date 对象 Date 对象用于处理日期与时间. 创建 Date 对象: new Date() 以下四种方法同样可以创建 Date 对象: var d = ne ...

  3. Java-判断是否为回文数

    /** * @ClassName: IsPalindrome * @author: bilaisheng * @date: 2017年9月19日 下午2:54:08 * 判断是否为回文数 * true ...

  4. Python设置浏览器宽高

    # 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Ch ...

  5. Ubuntu下python开发环境搭建

    配置语言 1) 依次点击设置--Region & Language--Manage Installed Languages --install/remove language--chinese ...

  6. [Functional Programming] Examples: When and Unless

    /** * When */ const _branch = (x) => { const result = (x && x.isPublic) ? dissoc('private ...

  7. pheonix从入门到进阶

    别人写的帖子感觉很好,记录一下: https://blog.csdn.net/u013411339/article/details/90657429

  8. CDOJ 1133 菲波拉契数制 变直接统计为构造

    菲波拉契数制 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit St ...

  9. codeforces643D

    阿狸的基环内向树森林 Background 当阿狸醒来的时候,发现自己处在基环内向森林的深处,阿狸渴望离开这个乌烟瘴气的地方.“明天还有与桃子的约会呢”,阿狸一边走一边说,“可是,这个森林的出口在哪儿 ...

  10. js--BOM对象(2)

    一.window对象是整个bom的核心 二.window对象的属性: history:(有关客户访问过的url信息) 方法: back() 加载 history 对象列表中的前一个URL forwar ...