一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我)__被在此绕晕,图片就放在末尾了。)

以下三点需要谨记

1.每个对象都具有一个名为__proto__的属性;

2.每个构造函数(构造函数标准为大写开头,如Function(),Object()等等JS中自带的构造函数,以及自己创建的)都具有一个名为prototype的方法(注意:既然是方法,那么就是一个对象(JS中函数同样是对象),所以prototype同样带有__proto__属性);

3.每个对象的__proto__属性指向自身构造函数的prototype;

直接上代码.....

             function Fun(){
}
// 我创造了一个函数Fn
// 这个函数由Function生成(Function作为构造函数)
var fn=new Fun()
// 我创建了一个函数fn
// 这个函数由Fn生成(Fn作为构造函数) console.log(fn.__proto__===Fun.prototype) //true
// fn的__proto__指向其构造函数Fun的prototype
console.log(Fun.__proto__===Function.prototype) //true
// Fun的__proto__指向其构造函数Function的prototype
console.log(Function.__proto__===Function.prototype) //true
// Function的__proto__指向其构造函数Function的prototype
// 构造函数自身是一个函数,他是被自身构造的
console.log(Function.prototype.__proto__===Object.prototype) //true
// Function.prototype的__proto__指向其构造函数Object的prototype
// Function.prototype是一个对象,同样是一个方法,方法是函数,所以它必须有自己的构造函数也就是Object
console.log(Fun.prototype.__proto__===Object.prototype) //true
// 与上条相同
// 此处可以知道一点,所有构造函数的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身)
console.log(Object.__proto__===Function.prototype) //true
// Object作为一个构造函数(是一个函数对象!!函数对象!!),所以他的__proto__指向Function.prototype
console.log(Object.prototype.__proto__===null) //true
// Object.prototype作为一切的源头,他的__proto__是null

// 下面是一个新的,额外的例子

var obj={}
// 创建了一个obj
console.log(obj.__proto__===Object.prototype) //true
// obj作为一个直接以字面量创建的对象,所以obj__proto__直接指向了Object.prototype,而不需要经过Function了!! // 下面是根据原型链延伸的内容
// 还有一个上文并未提到的constructor, constructor在原型链中,是作为对象prototypr的一个属性存在的,它指向构造函数(由于主要讲原型链,这个就没在意、); console.log(obj.__proto__.__proto__===null) //true
console.log(obj.__proto__.constructor===Object) //true
console.log(obj.__proto__.constructor.__proto__===Function.prototype) //true
console.log(obj.__proto__.constructor.__proto__.__proto__===Object.prototype) //true
console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__===null) //true
console.log(obj.__proto__.constructor.__proto__.__proto__.constructor.__proto__===Function.prototype) //true // 以上,有兴趣的可以一一验证  F12搞起.
         

为了方便记忆可以得出如下结论(如有错误欢迎斧正.....)

prototype是构造函数独有的属性;

对象的__prototype__属性通常与其构造函数的prototype属性相互对应;

所有构造函数的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身);

需要注意的指向是

Function的__proto__指向其构造函数Function的prototype;

Object作为一个构造函数(是一个函数对象!!函数对象!!),所以他的__proto__指向Function.prototype;

Function.prototype的__proto__指向其构造函数Object的prototype;

Object.prototype的__prototype__指向null(尽头);

原型链常用于继承相关的操作.

在文章结构顺便附送上俩个与原型链相关的方法....欢迎食用

1.

hasOwnProperty判断一个对象是否有名称的属性或对象,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。 
如果该属性或者方法是该 对象自身定义的而不是器原型链中定义的 则返回true;否则返回false; 
格式如下: 
 
object.hasOwnProperty(proName);   
括号内必须要加引号,并且直接写入属性名
 
2.
 
isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false。 
格式如下: 
object1.isPrototypeOf(object2); 
object1是一个对象的实例; 
object2是另一个将要检查其原型链的对象。 
原型链可以用来在同一个对象类型的不同实例之间共享功能。 
如果 object2 的原型链中包含object1,那么 isPrototypeOf 方法返回 true。 
如果 object2 不是一个对象或者 object1 没有出现在 object2 中的原型链中,isPrototypeOf 方法将返回 false。 
 
 
 

某图在这里  ps:本文是总结,加个人理解.....图是好久前留存在电脑的....忘了是在哪看到的...

关于JS中原型链中的prototype与_proto_的个人理解与详细总结的更多相关文章

  1. JS原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  2. JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  3. JS中原型链中的prototype与_proto_的个人理解与详细总结

    1.对象的内部属性[[prototype]]和属性__proto__:每个对象都具有一个名为__proto__的属性: 2.函数的属性prototype:每个构造函数(构造函数标准为大写开头,如Fun ...

  4. js delete删除对象属性,delete删除不了变量及原型链中的变量

    js delete删除对象属性,delete删除不了变量及原型链中的变量 一.delete删除对象属性 function fun(){ this.name = 'gg'; } var obj = ne ...

  5. javascript中原型链存在的问题

    我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function ...

  6. JavaScript中原型链存在的问题解析

    我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function ...

  7. javascript原型链中 this 的指向

    为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...

  8. js的原型链

    js中的原型链是一个很重要的概念,理解了原型链,对js程序的开发有很大的好处,废话不说,先上图: javascript是基于原型的语言,所以一个对象可以另一个对象继承.不过javascript实现的时 ...

  9. 前端基本知识(二):JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

随机推荐

  1. js如何弹出新窗口

    js如何弹出新窗口 时间:2012-4-22 弹出新窗口也是在网页设计中会经常用到的,其用法也很简单,是通过调用javascript的内置函数windows.open来产生的.  window.ope ...

  2. iBatis之Iterator的使用

    一:前言 现在这个项目使用的是iBatis,我刚刚开始的时候说是用MyBatis,因为我以前用过,觉得还是比较好用的啊,而且不像iBatis样,查什么一个字段不能多也不能少,觉得好无语啊. 二:内容 ...

  3. 全排列---(dfs)

    全排列输入一个数n,按字典序输出1-n的全排列 #include "cstdio" #include "cstring" ],ans[],n; void dfs ...

  4. 【bzoj1911-[Apio2010]特别行动队】斜率优化

    [题目描述] 有n个数,分成连续的若干段,每段的分数为a*x^2+b*x+c(a,b,c是给出的常数),其中x为该段的各个数的和.求如何分才能使得各个段的分数的总和最大. [输入格式]  第1行:1个 ...

  5. float/文档流

    float : left | right | none | inherit; 文档流是文档中可显示对象在排列时所占用的位置. 浮动的定义: 使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻 ...

  6. 运行HelloWorld.class是报错(错误: 找不到或无法加载主类 HelloWorld.class)

    1.从毕业到现在工作了几个月了,每天都是在写一些js代码,感觉作为一个web程序员,java还是十分重要的,于是自己买了一本java书来边学边练习,然后发现自己连使用记事本来编写的HelloWorld ...

  7. SVN代码提交

    SVN代码提交(转载) 原文链接:http://www.softown.cn/post/100.html 1.SVN代码提交 1) 原则 先更新再提交: SVN是为了多人协同开发而产生的,如果你在提交 ...

  8. Java 原子性引用 AtomicReference

    http://www.jianshu.com/p/882d0e2c3ea6 实现 原子操作 使用场景: 一个线程使用student对象,另一个线程负责定时读表,更新这个对象.那么就可以用AtomicR ...

  9. win32 listctrl控件右键菜单的实现

    HMENU Menu_list,Menu_all; POINT point; HINSTANCE hInstance;//下面代码放到BOOL WINAPI DialogProc下 case WM_C ...

  10. Sikuli 安装使用之初体验(为Sikuli X指定jre路径)

    Sikuli 是一种新颖的图形脚本语言,在实际的自动化测试中如果仅仅依靠selenium 还是远远不够的,selenium自动化本身是存在着诸多缺陷的,基于浏览器之外的控件 (windows 控件 等 ...