资讯专栏INFORMATION COLUMN

JS中原型的理解

fxp / 2683人阅读

摘要:我们都知道在的世界中,几乎所有东西都是对象,而对象又是通过继承来层层获得属性和方法,首先我们要区分对象和构造函数的区别,中对象继承的是对象,函数继承的是函数虽然函数也是对象,只有函数才有原型属性供它实例的对象继承,也就是说在中显示如下字符串

我们都知道在JS的世界中,几乎所有东西都是对象,而对象又是通过继承来层层获得属性和方法,

var str = new String("mario");
console.dir(str);

首先我们要区分String对象和function String(){}构造函数的区别,JS中对象继承__proto__的是对象,函数继承__proto__的是函数(虽然函数也是对象),只有函数才有原型prototype属性供它实例的对象继承,也就是说str.__proto__ === String.prototype;在CHROME中显示如下:

String
0: "m"
1: "a"
2: "r"
3: "i"
4: "o"
length: 5
__proto__: String
[[PrimitiveValue]]: "mario"

字符串对象的长度是5,初始值是“mario" 继承于String对象;这个String对象包含了我们熟知的大部分方法和属性如:
charAt(),charCodeAt()..........,仔细看String对象的属性和方法也包含一个constructor和__proto__属性,其中__proto__又指向Object对象,constructor指向的是 构造函数function String(){};
__proto__指向的Object对象包含以下属性和方法:

constructor  :ƒ Object()
hasOwnProperty : ƒ hasOwnProperty()
isPrototypeOf : ƒ isPrototypeOf()
propertyIsEnumerable : ƒ propertyIsEnumerable()
toLocaleString : ƒ toLocaleString()
toString : ƒ toString()
valueOf : ƒ valueOf()
__defineGetter__ : ƒ __defineGetter__()
__defineSetter__ : ƒ __defineSetter__()
__lookupGetter__ : ƒ __lookupGetter__()
__lookupSetter__ : ƒ __lookupSetter__()
get __proto__ : ƒ __proto__()
set __proto__ : ƒ __proto__()
[[PrimitiveValue]] : ""

这个Object对象没有__proto__属性,说明这个Object对象已经是继承的终点,所有的对象最终都会继承于它。
我们在看看最初的String对象有个constructor属性指向的是构造函数function String(){};说明每个对象都有一个constructor属性指向创建它的构造函数,所以字符串的constructor会指向String构造函数,那么问题是在JS中,函数也是对象,那么函数的作为对象时又是如何继承的呢,
实际上所有的构造函数都会继承一个特殊的匿名函数f(){};这个特殊的匿名函数只有最基本的属性和方法:

apply : ƒ apply()
arguments : (...)
bind : ƒ bind()
call : ƒ call()
caller : (...)
constructor : ƒ Function()
length : 0
name : ""
toString : ƒ toString()
Symbol(Symbol.hasInstance) : ƒ [Symbol.hasInstance]()
get arguments : ƒ ThrowTypeError()
set arguments : ƒ ThrowTypeError()
get caller : ƒ ThrowTypeError()
set caller : ƒ ThrowTypeError()
__proto__ : Object

这个特殊的匿名函数f,做为对象又继承了终极对象Object,虽然函数也是对象,但是作为JS中的一等公民,他又有自己的特权,匿名函数f又作为一等公民中的特殊存在,它又有什么特殊的属性和方法呢,通过上面显示的属性和方法我们看到匿名函数f创建它的构造函数是fuction Function(){};不要小看这个构造函数,它是特殊的匿名函数f以自己为原型和继承自己的属性创造的,就像女娲按照自己的样子和能力,创造了第一个人类,其他的人类的原型都是这个人,这个人我们简称始祖吧,只有简单的属性和方法,

arguments :null
caller : null
length : 1
name : "Function"
prototype : ƒ ()
__proto__ : ƒ ()

几乎就只有一个名字Function;而创造它的匿名函数 f 就像是女娲;
可以这么说,所有的函数都继承于这个特殊匿名函数 f ,都有个原型,供它的实例对象继承,而这个原型又继承于终极的Object对象。

总结:

JS里的所有对象分为两类,一般对象,作为函数的对象;
一般对象首先继承于创建它的原型对象,再继承于终极Object对象,constructor属性指向创建它的构造函数;当然作为终极Object对象,虽然没有在继承的对象,但是有创造他的构造函数即constructor属性,function Object(){};
函数继承于特殊的匿名函数 f ,还有个原型prototype即终极Object对象供它的实例对象继承,而它的建造者就是已自身为原型和继承的终极大BOSS function Function(){};

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85087.html

相关文章

  • 理解js原型与继承

    摘要:相当于在用原型继承编写复杂代码前理解原型继承模型十分重要。同时,还要清楚代码中原型链的长度,并在必要时结束原型链,以避免可能存在的性能问题。 js是一门动态语言,js没有类的概念,ES6 新增了class 关键字,但只是语法糖,JavaScript 仍旧是基于原型。 至于继承,js的继承与java这种传统的继承不一样.js是基于原型链的继承. 在javascript里面,每个对象都有一...

    wthee 评论0 收藏0
  • 面向对象 JavaScript

    摘要:是完全的面向对象语言,它们通过类的形式组织函数和变量,使之不能脱离对象存在。而在基于原型的面向对象方式中,对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或者只是部分具备一些面向对象的特征。本文将回归面向对象本意,从对语言感悟的角度阐述为什...

    novo 评论0 收藏0
  • 你是否理解jsObject与Function与原型

    摘要:原型对象是由创建的,因此原型对象的构造函数是构造函数也可以是称为对象,原型对象也就继承了其生父构造函数中的数据,也同时继承了原型对象的数据。当然这条原型链中的数据,会被还是还是这类构造函数继承,但是不会被这些继承,他们不处于同一个链条上。 js中,Function的本质是什么?Object的本质又是什么?js中有几条原型链? showImg(https://segmentfault.c...

    itvincent 评论0 收藏0
  • JS原型原型链深入理解

    摘要:如果要理清原型和原型链的关系,首先要明确一下几个概念中的所有东西都是对象,函数也是对象而且是一种特殊的对象中所有的东西都由衍生而来即所有东西原型链的终点指向对象都有一个隐藏的属性,他指向创建它的构造函数的原型,但是有一个例外,指向的是。 首先要搞明白几个概念: 函数(function) 函数对象(function object) 本地对象(native object) 内置对象(bu...

    Alex 评论0 收藏0
  • js深入(一)从原型理解原型

    摘要:构造函数创建一个对象上边这个例子,我们通过构造函数创建了一个实例,从这个实例到他的原型到最后得,他们之间得关系,就形成了一个原型链和首先上边这个例子里边,我们声明了一个构造函数,在后再这个构造函数里边有一个的属性。 构造函数创建一个对象 function Person() { } var person = new Person(); person.name = zhangsan; c...

    马忠志 评论0 收藏0
  • 详解js继承(一)

    摘要:构造函数,实例构造函数,是用来创建对象的函数,本质上也是函数。这里刚好解释一下时,说到的,可以通过实例的访问构造函数,但是本质上是原型对象的属性。 前言 最近在学vue,到周末终于有空写一些东西了(想想又能骗赞,就有点小激动!)。在javascript基础中,除了闭包之外,继承也是一个难点。因为考虑到篇幅较长,所以打算分成两个部分来写。同样基于《javascript高级程序设计》,做一...

    Object 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<