js原型(重点理解)

  网络上很多关于JS原型的理解,写了很多,我也看了很多,但总是云里雾里,很多文章一上来就说Object是一切对象的根对象,这句话非常误导人的思维,后来自己在控制台,自己分析出来了比较好理解的方式,下面我来详细屡屡关于js原型的正确理解方式。

主要是理解js中的对象,函数,函数对象,函数实例

首先我们来聊聊这四个概念

对象

对象是什么呢,对象就是使用 json 格式表示的代码块,用这种方式表示 js 中的对象如下:

{ " name " : " runoob " , " alexa " : 10000 , " site " : null }

JSON 对象使用在大括号   {...}   中书写。

对象可以包含多个   key/value (键 / 值) 对。

key 必须是字符串, value 可以是合法的 JSON 数据类型(字符串 , 数字 , 对象 , 数组 , 布尔值或 null )。

key value 中使用冒号   :   分割。

每个 key/value 对使用逗号   ,   分割。

函数

函数就是function关键字定义的一段代码块,就是自己定义的看得到的那一块代码,称之为函数,js中内置了一些基础函数比如(Object,Date等等),其实质就是带有构造器constructor的对象,js中可以将一个带有构造器constructor的对象表示为为函数,函数是json对象的变体表现形式

(注意:永远不要忘记js中的对象就是json格式的代码块,函数是这个json格式对象的变体)

如下为Object函数的原型Object.prototype,也是一个json键值对对象:

 {
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__:
null get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
}

函数有两种作用:一是执行特定功能的代码块,二是构造对象

函数对象

函数对象就是函数的原型 ,要与函数本身区分开来,比如Date函数的函数对象为Date.prototype,后面我在说特定函数对象的时候都会加上.prototype,因为这个 函数原型才真正表述为函数对象

函数实例

函数实例就是通过函数构造器创造的对象,一个函数可以构造出多个不同的但相似的函数实例对象,例如:

 function  myFunction(a, b) {  return  a * b;
}
var x = myFunction (3, 3 ); var y = myFunction (4, 3 );
从控制台可以分析出函数实例x,y是函数对象Number的子对象,其_proto_属性指向的是Number.prototype,而不是我们通常认为的x,y为myFunction.prototype的子对象
当然这里也不能绝对,因为函数实例的父对象是不确定的,如下实例
function myFunction2()
{
console.log(
'nihao' );
}
var z= myFunction2();
var m= new
myFunction2();
 VM360: 3 nihao
undefined
z
undefined
函数实例z返回的日志为undefined
 函数实例m返回的日志为myFunction2 {} 
 以上可知通过new关键字构造的新对象其父对象才指向其构造函数对象 

对象与函数 的基本认识

对象的 _proto_ 属性指向的是当前对象的父对象

只有函数有 constructor prototype 属性

函数中的prototype属性字面意思是原型,指的是当前函数的对象原型,函数只是这个对象原型的变体形式

按照我的理解是这样的,创造js这门语言的时候是定义这是一个面向对象的语言,所有首要任务就是指定对象的格式,就有json对象表示法,然后就是构造执行代码块的结构,即函数 表示法,再就是对象与函数的关联,想象js一切皆为对象,函数的定义本身也是在构造对象,即定义的函数可以表示为带有constructor的对象,这就是函数原型,然后通过函数定义法着手定义根对象就是Object.prototype以及其他的一些内置对象

关于Object与Object.prototype的理解

js中所有的对象继承自Object.prototype这个原型对象,这个原型对象用函数表示就是Object,所以很多文章都Object为根对象,这也没错,因为Object表示的就是根,只是这个根是以函数的形式表示出来,而这个函数的原型就是真正的根对象,即Object.prototype:{…}(这个里我省略了对象中的内容),这个Object.prototype派生了函数对象和普通对象(如Math,JSON等,因为这些对象中没有构造器,可自行在控制台查看),永远不要忘记Object这个函数是通过函数构造器构造出来的函数模样的一块代码,其本质是Object.prototype这个原型,这才是根对象。

Object是一个函数,其属性指针_proto_指向的是函数根对象ƒ () { [native code] }, 而函数根对象的_proto_则指向Object.prototype,应该有这样的关系:Object._proto_._proto_===Object.prototype;

不过js在_proto_属性后面就不让指针跟踪了, 不过我们也可以通过变通的方式来查到,从这里可以看出来:

Object._proto_===Function.prototype  //返回值都为ƒ () { [native code] };

Function.prototype.__proto__=== Object.prototype //返回值为true

Object.prototype._proto_则为null。

以上可以看出,JS中的一切对象都是Object.prototype的子对象,函数根对象ƒ () { [native code] }是Object.prototype的子对象,函数是函数根对象ƒ () { [native code] }的子对象,Object函数也不列外。(注意Function函数是函数根对象的显式函数声明,代表着函数根对象,函数根对象ƒ () { [native code] }是在js运行时已经定义好了的对象)

很多文章都说所有函数都派生自这个Function对象,准确的来说应该是所有函数对象派生自Function.prototype,而Function.prototype就是ƒ () { [native code] },那么问题来了,Object也是函数,那它也是派生自这个对象吗,是的,前面我已经说了,Object在js中写的时候是个函数不是根对象,而这个函数的原型Object.prototype才是真正的根对象,其形式为:这个在函数概念那里已经表述出来了,可以返回去巩固巩固。

关于JS Function函数理解

JS内置对象中, Function函数 (注意我这里表述的是函数而不是函数对象,因为 Function的函数对象准确来说应该为 Function.prototype) 较为特殊,这个理解起来就比较困难,因为 Function.prototype===Function._proto_,很多人很疑惑为什么会等于,其实这里还缺少了一个重要的信息,那就是ƒ  () { [native code] },这个才是根函数对象,这个根函数对象的父对象指向的是 Object.prototype这个根对象 ,这是在 js运行时中就已经定义好的,而 Function.prototype这个函数对象原型恰好就是这个根函数对象ƒ  () { [native code] },而这个 Function._proto_这个属性指针恰好就指向了ƒ  () { [native code] },这都是在 js运行时中定义好了, Function这个函数的作用就是为了创建函数实例的另外一种方法,其父类对象还是 Object.Prototype,只是显式定义函数的多一种选择。

 

好了,文章结束,希望对各位有所帮助!

标签: Javascript

添加新评论