今天重温了下Javacript,给大家带来一篇Javascript博文,相信对于Javacript有一定了解的人都听过prototype原型这个概念,今天我们深度的分析下prototype与__proto__。

好了,下面看一个非常简单的例子:

      var Person = function(name)
{
this.name = name ;
};
var p = new Person("Ben");
console.log(p.name);

代码简单的 你不用说明了,如果现在让大家根据上面的代码画一张包含Function与Object的内存图,大家肯定回想什么叫包含Function与Object,上面的代码和它们有几毛钱的关系。好了,下面我先按要求把图画出来,大家参考下:

解析下:

1、任何一个由构造器产生的对象都有__proto__属性,且此属性指向该构造器的prototype。

2、所有构造器/函数的__proto__都指向Function的prototype

拿第2条对比第1条,貌似我们发现了什么,没错函数的构造器就是Function,看下面的代码:

   //函数表达式
var Person = function(name)
{
this.name = name ;
};
//函数声明
function Person(name)
{
this.name = name ;
}
//上面两种方式实际上就相当与new Function
var Person = new Function("name" , "this.name = name ;" );

当然了不能说说,下面看代码验证:

 console.log(Person.__proto__ === Function.prototype);  //true
console.log(typeof p.__proto__);//objcect
console.log(p.__proto__.__proto__ === Object.prototype); //true

有人会问,那么Function与Object的prototype,__prop__到底是什么呢?

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

有此可见

1、所有的构造器包括Object和Function都继承了Function.prototype的方法,由第三行可知所有的构造器都是对象,即js中一切皆为对象。

2、__proto__最终的指向都是Object.prototype,这也就是js中的原型链。

最后我们看一下Object的文档:

The following table lists properties of the Object Object.

Property

Description

__proto__
Property

Specifies the prototype for an object.

constructor
Property

Specifies the function that creates an object.

prototype
Property

Returns a reference to the prototype for a class of objects.

发现Object还有个constructor属性。

1、constructor属性指向的是创建当前对象的构造函数。

2、每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数

看下面的例子:

  //函数表达式
var Person = function(name)
{
this.name = name ;
}; var p = new Person("Ben"); console.log(p.constructor === Person);//true
console.log(Person.prototype.constructor === Person); //true
console.log(Person.prototype instanceof Object); //true
console.log(Person.prototype instanceof Person); //false
//改变Person的prototype
Person.prototype = {name:"123"} ;
var p2 = new Person("Ben");
console.log(p2.constructor === Object);//true
console.log(p2.constructor === Person.prototype.constructor);//true
console.log(Person.prototype.constructor === Object);//true
console.log(Person.prototype.constructor === Person);//false

当改变Person的prototype时,会发现,Person.prototype.constructor指向了Object,主要是因为:

Person.prototype = {name:"123"} 相当于Person.prototype=new Object({name:"123"} );此时的构造器变成了Object.

好了,就介绍到这里,各位看官没事留个言,赞一个,哈~。

Javascript中的__proto__、prototype、constructor的更多相关文章

  1. JavaScript中的Array.prototype.slice.call()方法学习

    JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意: 这个对象一定要有length属性). 但有一个例外 ...

  2. 【你不知道的javaScript 上卷 笔记7】javaScript中对象的[[Prototype]]机制

    [[Prototype]]机制 [[Prototype]]是对象内部的隐试属性,指向一个内部的链接,这个链接的作用是:如果在对象上没有找到需要的属性或者方法引用,引擎就 会继续在 [[Prototyp ...

  3. javascript中原型(prototype)与原型链

    javascript是一门动态语言(动态语言Dynamic Programming Language:动态类型语言,意思就是类型的检查是在运行时做的,也就是常说的“弱类型”语言),没有类的概念,有cl ...

  4. [转] 理解 JavaScript 中的 Array.prototype.slice.apply(arguments)

    假如你是一个 JavaScript 开发者,你可能见到过 Array.prototype.slice.apply(arguments) 这样的用法,然后你会问,这么写是什么意思呢? 这个语法其实不难理 ...

  5. 彻底搞懂js __proto__ prototype constructor

    在开始之前,必须要知道的是:对象具有__proto__.constructor(函数也是对象固也具有以上)属性,而函数独有prototype 在博客园看到一张图分析到位很彻底,这里共享: 刚开始看这图 ...

  6. JavaScript中的__proto__

    实例中的__proto__ 箭头函数的__proto__ 需要注意的是箭头函数的__proto__并没有指向Function构造函数的的原型对象 MDN上的资料显示,箭头函数不绑定Arguments ...

  7. JavaScript中的原型prototype和__proto__的区别及原型链概念

    问题 初学js的同学,总是搞不清楚js中的原型是什么东西,看着控制台打印出来的一串串__proto__,迷惑不已. 例如我定义一个Person,创建一个实例p,并打印实例. function Pers ...

  8. javascript中的__proto__和prototype

    一.2个参考网址: http://icekiller110.iteye.com/blog/1566768 http://www.cnblogs.com/snandy/archive/2012/09/0 ...

  9. javascript中的__proto__ 和prototype

    不错的一张图

随机推荐

  1. 访问项目时,不能自动加载index.php文件

    1.修改配置文件D:\lamp\apache\conf\httpd.conf加上DirectoryIndex index.hmtl index.php <IfModule !mpm_netwar ...

  2. AngularJs打造一个简易权限系统

    AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJ ...

  3. poj 2409+2154+2888(Burnside定理)

    三道burnside入门题: Burnside定理主要理解置换群置换后每种不动点的个数,然后n种不动点的染色数总和/n为answer. 对于旋转,旋转i个时不动点为gcd(n,i). 传送门:poj ...

  4. 浅谈spring——spring MVC(十一)

    springMVC框架主要是围绕DispatcherServlet这个核心展开,它负责拦截请求并将其分派给相应的的处理器处理,然后将结果响应给用户.包括注解驱动控制器.请求及响应信息处理.视图解析.本 ...

  5. Perl语言学习笔记 9 正则表达式处理文本

    1.更换 s/PATTERN/REPLACE/; #返回是否更换成功布尔值 能够使用捕获变量,如:s/(\w)/$1/ 匹配失败则不做不论什么处理 2.定界符 对于没有左右之分的定界符.反复三次就可以 ...

  6. FZU1608(线段树)

    传送门:Huge Mission 题意:给定区间范围[0,N] (2 <= N <= 50000)和M个区间 (1 <= M <= 500000)和这些区间上的权值,求最终并区 ...

  7. c++程序猿经典面试题

    1.请问i的值会输出什么? #include"iostream.h" int i=1; void main() { int i=i; cout<<i<<en ...

  8. Maven POM入门

    Super POM(project object model) Maven内置了一个默认的POM(不在项目中,因此不可见),每一个project都会继承自这个默认的POM,因此叫Super POM.除 ...

  9. IE8,IE9,IE10,FireFox 的CSS HACK

    #employeesView { top: 732px; //所有浏览器 top: 730px\9;//所有IE浏览器 } @media all and (min-width:0) { #employ ...

  10. codeforces#253 D - Andrey and Problem里的数学知识

    这道题是这种,给主人公一堆事件的成功概率,他仅仅想恰好成功一件. 于是,问题来了,他要选择哪些事件去做,才干使他的想法实现的概率最大. 我的第一个想法是枚举,枚举的话我想到用dfs,但是认为太麻烦. ...