Javascript中的__proto__、prototype、constructor
今天重温了下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 |
|---|---|
|
Specifies the prototype for an object. |
|
|
Specifies the function that creates an object. |
|
|
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的更多相关文章
- JavaScript中的Array.prototype.slice.call()方法学习
JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意: 这个对象一定要有length属性). 但有一个例外 ...
- 【你不知道的javaScript 上卷 笔记7】javaScript中对象的[[Prototype]]机制
[[Prototype]]机制 [[Prototype]]是对象内部的隐试属性,指向一个内部的链接,这个链接的作用是:如果在对象上没有找到需要的属性或者方法引用,引擎就 会继续在 [[Prototyp ...
- javascript中原型(prototype)与原型链
javascript是一门动态语言(动态语言Dynamic Programming Language:动态类型语言,意思就是类型的检查是在运行时做的,也就是常说的“弱类型”语言),没有类的概念,有cl ...
- [转] 理解 JavaScript 中的 Array.prototype.slice.apply(arguments)
假如你是一个 JavaScript 开发者,你可能见到过 Array.prototype.slice.apply(arguments) 这样的用法,然后你会问,这么写是什么意思呢? 这个语法其实不难理 ...
- 彻底搞懂js __proto__ prototype constructor
在开始之前,必须要知道的是:对象具有__proto__.constructor(函数也是对象固也具有以上)属性,而函数独有prototype 在博客园看到一张图分析到位很彻底,这里共享: 刚开始看这图 ...
- JavaScript中的__proto__
实例中的__proto__ 箭头函数的__proto__ 需要注意的是箭头函数的__proto__并没有指向Function构造函数的的原型对象 MDN上的资料显示,箭头函数不绑定Arguments ...
- JavaScript中的原型prototype和__proto__的区别及原型链概念
问题 初学js的同学,总是搞不清楚js中的原型是什么东西,看着控制台打印出来的一串串__proto__,迷惑不已. 例如我定义一个Person,创建一个实例p,并打印实例. function Pers ...
- javascript中的__proto__和prototype
一.2个参考网址: http://icekiller110.iteye.com/blog/1566768 http://www.cnblogs.com/snandy/archive/2012/09/0 ...
- javascript中的__proto__ 和prototype
不错的一张图
随机推荐
- VCL改变主窗体的方法
使用如下语句即可Pointer((@Application.MainForm)^) := Form1; 仔细想想和Pointer((Application.MainForm)) := Form1;有什 ...
- 使用ffmpeg 对视频截图,和视频转换格式
//执行CMD命令方法 public static void CmdProcess(string command)//调用CMD { //实例化一个进程类 ...
- UDP vs. TCP
UDP vs. TCP 原文:UDP vs. TCP,作者是Glenn Fiedler,专注于游戏网络编程相关工作多年. 说在最前面的话 翻译这篇文章的初衷:我在工作中根本接触不到网络游戏编程,但是我 ...
- UVA796- Critical Links(无向图中的桥梁)
题目链接 题意: 给出一个无向图,按顺序输出桥 思路:求出全部的桥,然后按顺序输出就可以 代码: #include <iostream> #include <cstdio> # ...
- jQuery 自学笔记—5 遍历
什么是遍历? jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止. 下图展示了一个家族树. ...
- hdu1690 Bus System (dijkstra)
Problem Description Because of the huge population of China, public transportation is very important ...
- Nginx 进程间通信
Linux下的IPC非常多,nginx的进程都是有亲缘关系的进程,对于他们的通信我们选择TCP socket进行通信. TCP socket 用来做进程通信的优点有, 1.socket是文件描 ...
- Kafka 高性能吞吐揭秘
Kafka 高性能吞吐揭秘 Kafka作为时下最流行的开源消息系统,被广泛地应用在数据缓冲.异步通信.汇集日志.系统解耦等方面.相比较于RocketMQ等其他常见消息系统,Kafka在保障了大部分 ...
- 新浪SAE数据库信息
此账号仅能在SAE平台上使用,不能从外部连接我们建议开发者使用SaeMysql操作数据库 如果您想自己实现数据库相关操作,可以使用以下常量: 用户名 : SAE_MYSQL_USER 密 码 : S ...
- 深入了解java同步、锁紧机构
该薄膜还具有从本文试图一个高度来认识我们共同的同步(synchronized)和锁(lock)机制. 我们假定读者想了解更多的并发知识推荐一本书<java并发编程实战>,这是一个经典的书, ...