Prototypes in Javascript 收集.__proto__

简介: It’s important to understand that a function’s prototype property has nothing to do with it’s actual prototype.   Javascript的每个对象均有一个原型(prototype)。

It’s important to understand that a function’s prototype property has nothing to do with it’s actual prototype.   微笑

Javascript的每个对象均有一个原型(prototype)。当消息(请求某个属性的指令)到达某个对象时,Javascript会尝试在该对象上寻找该属性,但没有的时候就会将消息转发到该对象的原型并在原型上寻找该属性,就是这样不断向上层原型转发消息,直到在某个原型中找到该属性或消息转发到顶层原型(Object对象)。(译者语:每个对象的原型均指向另一个对象,最顶层的原型就是Object类的实例)

原型继承链可以无限延长。但一般情况下过长的原型链会令人困惑且难以维护。

image

恩 js每个独享都有原型这个属性

You said every object has a prototype. But when I write ({}).prototype I get undefined. Are you crazy?

The true prototype of an object is held by the internal [[Prototype]] property.

一般情况下 Prototype 这个属性是对象内部私有属性

ec5 规定了访问这个属性的方式

Object.getPrototypeOf(object)

 

Object.getPrototypeOf({})

是可以获取到值的

image

还可以通过火狐等私有属性访问

({}).__proto__

image

可见是一致的

image

It’s important to understand that a function’s prototype property has nothing to do with it’s actual prototype.

//(example fails in IE)
var A = function(name) {
    this.name = name;
}
  
A.prototype == A.__proto__; //false
A.__proto__ == Function.prototype; //true - A's prototype is set to its constructor's prototype property
测试代码
<script>
    function A(name) {
        this.name = name;
    }
    console.log("prototype:"+  A.prototype ); //false
    console.log("prototype typeof:"+ typeof A.prototype ); //false
    console.log( "__proto__:"+ A.__proto__); //false
    console.log( "__proto__: typeof:"+ A.__proto__); //false
    console.log(  A.prototype == A.__proto__); //false
    console.log(  A.__proto__ == Function.prototype); //true - A's prototype is set to its constructor's prototype property
    console.log('====================')
    console.log( A.__proto__.__proto__==A.prototype.__proto__)
    console.log( A.__proto__.__proto__)
    console.log("A.__proto__.__proto__:"+typeof A.__proto__.__proto__)
    console.log( A.prototype.__proto__)
    console.log(" A.prototype.__proto__:"+typeof  A.prototype.__proto__)

</script>

通过实验数据可以看到 A真是原型.__proto__和 A里面的属性prototype没有直接关系

A..__proto__  和 Function.prototype 是一致的

也就是说 定义一个构造函数

function A(name) { this.name = name; }

A 的原型是Function.prototype

然后在  var myA=new A('mm')  用构造函数实例化一个对象

这个对象的原型就是 A.prototype

  console.log("myA.__proto__== A.prototype:"+(myA.__proto__== A.prototype))

也可以不通过构造函数构建对象 例如 可以直接根据 prototype属性创建对象

var myA2=Object.create(A.prototype);
console.log("myA2.__proto__== A.prototype:"+(myA2.__proto__== A.prototype))

所以原型 链 一定要NEW一次,否则就直接绕过去了

 

image

When a primitive is asked for it’s prototype it will be coerced to an object.

//(works in IE<=8 too, due to double-negative)

false.__proto__ === Boolean(false).__proto__; //true

js 里面最基本的5中数据类型 如果找他们的原型的话,会自动转换成 包装类 再找自己的原型

console.log( Object.getPrototypeOf(false))

Uncaught TypeError: Object.getPrototypeOf called on non-object

Object.getPrototypeOf 说明这个方法只能对对象使用

还有点东西

例如 function bb(){}

bb.prototype  根据BB创建对象的原型      

使用new操作符实例化对象的原型链

bb.__proto__ 创建bb函数的原型 (是 function )

bb.prototype.__proto__ 创建bb函数的原型 (是 function ) 的原型 (是 Object)

bb.prototype.__proto__ .__proto__   null

image

A instanceof B

A 为对象  B构造函数  B出现在A的圆形脸上

test
相关文章
|
数据采集 监控 JavaScript
网站流量日志分析 —数据采集—页面埋点 JavaScript 收集数据|学习笔记
快速学习网站流量日志分析—数据采集—页面埋点 JavaScript 收集数据
591 0
网站流量日志分析 —数据采集—页面埋点 JavaScript 收集数据|学习笔记
|
14天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
6月前
|
JavaScript 前端开发 开发者
【专栏】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念
【4月更文挑战第29天】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念。prototype 是函数属性,用于实现对象继承,方法和属性定义在其上可被所有实例共享。__proto__是对象属性,实现属性查找机制,当对象自身找不到属性时,会沿原型链向上查找。两者关系:__proto__指向构造函数的 prototype,构成对象与原型的桥梁。虽然 prototype 可直接访问,但__proto__由引擎内部维护,不可见。理解两者区别有助于深入学习 JavaScript。
94 1
|
JavaScript
JS中的prototype、__proto__与constructor
JS中的prototype、__proto__与constructor
66 0
JS中的prototype、__proto__与constructor
|
自然语言处理 JavaScript 前端开发
JavaScript:深入理解原型语言,洞察__proto__与prototype之间的区别
JavaScript:深入理解原型语言,洞察__proto__与prototype之间的区别
368 0
|
JavaScript
JS中的prototype、__proto__与constructor
JS中的prototype、__proto__与constructor
JS中的prototype、__proto__与constructor
|
JavaScript 前端开发 程序员
程序猿福利:JavaScript 开源库集合网站 JSDB.io 收集分类了数百个最好的JavaScript库
JSDB.io是一个JavaScript库的集合网站,收集分类了数百个最好的JavaScript库,将Github中大部分JavaScript库都整理到了一个网站中,便于Web开发者查找使用,同时用户也可以主动提交未被收录的JS库。
227 0
程序猿福利:JavaScript 开源库集合网站 JSDB.io 收集分类了数百个最好的JavaScript库
|
JavaScript 前端开发
彻底深刻理解js原型链之prototype,__proto__以及constructor(二)
这篇教程主要目的对原型链概念进一步加深理解
彻底深刻理解js原型链之prototype,__proto__以及constructor(二)
|
JavaScript 前端开发
彻底深刻理解js原型链之prototype,__proto__以及constructor(一)
以下概念请花费一定的时间彻底理解,才能进行下一步,思考题一定要思考,这样才能彻底掌握原型链的知识点,教程中如果有任何的错误不足请指正!
24219 0
彻底深刻理解js原型链之prototype,__proto__以及constructor(一)