函数在整个js中是最复杂也是最重要的知识

一个函数中存在多面性:

1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁。

2.“类”:它有自己的实例,也有一个叫做prototype属性 是自己的原型,它的实例都可以指向自己的原型

3.“普通对象”:和var obj={}中的obj一样,就是一个普通的对象,它作为对象可以有一些自己的私有属性,也可以通过__proto__找到Function.prototype

对象:

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

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

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

思路扩展如下:

  1. function Fun(){}
  2. // 我创造了一个函数Fun
  3. // 这个函数由Function生成(Function作为构造函数)
  4. var fn=new Fun()
  5. // 我创建了一个函数fn
  6. // 这个函数由Fun生成(Fun作为构造函数)
  7. console.log(fn.__proto__===Fun.prototype) //true
  8. // fn的__proto__指向其构造函数Fun的prototype
  9. console.log(Fun.__proto__===Function.prototype) //true
  10. // Fun的__proto__指向其构造函数Function的prototype
  11. console.log(Function.__proto__===Function.prototype) //true
  12. // Function的__proto__指向其构造函数Function的prototype
  13. //构造函数自身是一个函数,他是被自身构造的
  14. console.log(Function.prototype.__proto__===Object.prototype) //true
  15. Function.prototype__proto__指向其构造函数Objectprototype
  16. // Function.prototype是一个对象,同样是一个方法,方法是函数,所以它必须有自己的构造函数也就是Object
  17. console.log(Fun.prototype.__proto__===Object.prototype) //true
  18. // 与上条相同
  19. // 此处可以知道一点,所有构造函数的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身)
  20. console.log(Object.__proto__===Function.prototype) //true
  21. // Object作为一个构造函数(是一个函数对象!!函数对象!!),所以他的__proto__指向Function.prototype
  22. console.log(Object.prototype.__proto__===null) //true
  23. // Object.prototype作为一切的源头,他的__proto__是null

第二个例子:

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

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

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(尽头);

与原型链相关的方法:

hasOwnProperty判断一个对象是否有这个名称的属性或对象,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。

如果该属性或者方法是该 对象自身定义的而不是其原型链中定义的 则返回true;否则返回false;

格式如下:

object.hasOwnProperty(proName);   

括号内必须要加引号,并且直接写入属性名

isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false。

格式如下:

object1.isPrototypeOf(object2);

object1是一个对象的实例;

object2是另一个将要检查其原型链的对象。

原型链可以用来在同一个对象类型的不同实例之间共享功能。

如果 object2 的原型链中包含object1,那么 isPrototypeOf 方法返回 true。

如果 object2 不是一个对象或者 object1 没有出现在 object2 中的原型链中,isPrototypeOf 方法将返回 false。

需要根据案例好好理解的图:

参考链接:https://github.com/creeperyang/blog/issues/9

深入理解JS对象和原型链的更多相关文章

  1. 1--面试总结-js深入理解,对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This

    参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p ...

  2. JS对象、原型链

    忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...

  3. 理解js中的原型链

    对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性. 关于原型 在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承 ...

  4. 理解js中的原型链,prototype与__proto__的关系

    说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script type="text/javascript"> 2 var Pers ...

  5. JS对象与原型链

    每个函数都存在一个prototype的属性,然后这个属性值为一个对象,我们称之为原型对象 每个对象都存在着一个隐藏的属性"__proto__" 这个属性引用了创建这个对象的函数的p ...

  6. 【转】理解js中的原型链,prototype与__proto__的关系

    说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script type="text/javascript"> 2 var Pers ...

  7. [转]理解js中的原型链,prototype与__proto__的关系

    本文转自:http://rockyuse.iteye.com/blog/1426510 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script typ ...

  8. JS对象与原型

    一. JS的对象 1.1 创建对象的几种方式 1.1.1 通过字面量创建对象 在js中,一对{} 其实就是一个对象 var person = { name: "tom", age: ...

  9. JS核心系列:浅谈原型对象和原型链

    在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...

随机推荐

  1. BT下载会损害硬盘吗

    简而言之,这个问题是否存在,取决于网络带宽的发展速度与硬件性能的发展速度.如果硬件发展的速度快, 网络带宽速度发展慢,那么对大多数人而言,当前的硬件在慢速的带宽下载BT不会造成任何的硬盘损坏.     ...

  2. java 问题

    1. 在ezmorph包中 有个 引用类时 写法为import [Z; 为什么加个[看不懂

  3. C++之运算符重载

     C++ Code  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...

  4. hdu 4240在(最大流)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4240 思路:题意真的有点难理解:在城市A->B之间通过所有路径一小时之内能通过最大的车辆(Max ...

  5. jquery获取设置input值

    $("#input").val("123"),注意val()这个函数$("#input").val("123"),//给 ...

  6. Cocos Studio编辑器运行日志路径

    有时候打开Cocos Studio直接崩溃,要想查找原因就要查log了,网上找了好久才找到日志路径,在你工作空间下面的CocosStudio2\logs. 工作空间就是安装时候设置的那个路径.

  7. Gson 解析JSON数据

    {"province":[{"name":"安徽省","city":[{"name":"安 ...

  8. 【BZOJ4262】Sum 单调栈+线段树

    [BZOJ4262]Sum Description Input 第一行一个数 t,表示询问组数. 第一行一个数 t,表示询问组数. 接下来 t 行,每行四个数 l_1, r_1, l_2, r_2. ...

  9. android how to deal with data when listview refresh

    如何解决listview数据刷新,下拉刷新,上拉加载更多时,图片不闪烁. 在Activity的onResume()方法中将adaper和listView重新再绑定一次. listView.setAda ...

  10. 动态svg效果

    import React from 'react'; import TweenOne from 'rc-tween-one'; import SvgDrawPlugin from 'rc-tween- ...