当前位置: 美高梅棋牌 > 智能硬件 > 正文

JS原型、原型链深入理解

时间:2019-12-04 03:57来源:智能硬件
JS 中原型和原型链深入理解 2018/05/05 · JavaScript· 原型 原文出处: erdu    首先要搞明白几个概念: 函数(function) 函数对象(function object) 本地对象(native object) 内置对象(build-in object)

JS 中原型和原型链深入理解

2018/05/05 · JavaScript · 原型

原文出处: erdu   

首先要搞明白几个概念:

  1. 函数(function)
  2. 函数对象(function object)
  3. 本地对象(native object)
  4. 内置对象(build-in object)
  5. 宿主对象(host object)

原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。

函数

function foo(){ } var foo = function(){ }

1
2
3
4
5
6
function foo(){
    
}
var foo = function(){
    
}

前者为函数声明,后者为函数表达式。typeof foo
的结果都是function。

一、初识原型

在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个”[[Prototype]]”内部属性,这个属性所对应的就是该对象的原型。

“[[Prototype]]”作为对象的内部属性,是不能被直接访问的。所以为了方便查看一个对象的原型,Firefox和Chrome中提供了proto这个非标准(不是所有浏览器都支持)的访问器(ECMA引入了标准对象原型访问器”Object.getPrototype(object)”)。在JavaScript的原型对象中,还包含一个”constructor”属性,这个属性对应创建所有指向该原型的实例的构造函数

函数对象

函数就是对象,代表函数的对象就是函数对象

官方定义, 在Javascript中,每一个函数实际上都是一个函数对象.JavaScript代码中定义函数,或者调用Function创建函数时,最终都会以类似这样的形式调用Function函数:var newFun = new Function(funArgs, funBody)

其实也就是说,我们定义的函数,语法上,都称为函数对象,看我们如何去使用。如果我们单纯的把它当成一个函数使用,那么它就是函数,如果我们通过他来实例化出对象来使用,那么它就可以当成一个函数对象来使用,在面向对象的范畴里面,函数对象类似于类的概念。

var foo = new function(){ } typeof foo // object 或者 function Foo (){ } var foo = new Foo(); typeof foo // object

1
2
3
4
5
6
7
8
9
10
11
12
13
var foo = new function(){
    
}
typeof foo // object
 
或者
 
function Foo (){
    
}
var foo = new Foo();
 
typeof foo // object

上面,我们所建立的对象

二、规则

在JavaScript中,每个函数 都有一个prototype属性,当一个函数被用作构造函数来创建实例时,这个函数的prototype属性值会被作为原型赋值给所有对象实例(也就是设置 实例的__proto__属性),也就是说,所有实例的原型引用的是函数的prototype属性。(****只有函数对象才会有这个属性!****)

new 的过程分为三步

    var p =newPerson('张三',20);

1.var p={}; 初始化一个对象p。

2.p.proto=Person.prototype;,将对象p的proto属性设置为 Person.prototype

3.Person.call(p,”张三”,20);调用构造函数Person来初始化p。关于call/apply使用

本地对象

ECMA-262 把本地对象(native object)定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。简单来说,本地对象就是 ECMA-262 定义的类(引用类型)。它们包括:
Object,Function,Array,String,Boolean,Number
Date,RegExp,Error,EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError.

我们不能被他们起的名字是本地对象,就把他们理解成对象(虽然是事实上,它就是一个对象,因为JS中万物皆为对象),通过

typeof(Object) typeof(Array) typeof(Date) typeof(RegExp) typeof(Math)

1
2
3
4
5
6
typeof(Object)
typeof(Array)
typeof(Date)
typeof(RegExp)
typeof(Math)
 

返回的结果都是function

也就是说其实这些本地对象(类)是通过function建立起来的,

function Object(){ } function Array(){ } ...

1
2
3
4
5
6
7
function Object(){
    
}
function Array(){
    
}
...

可以看出Object原本就是一个函数,通过new Object()之后实例化后,创建对象。类似于JAVA中的类。

三、初识Object

Object对象本身是一个函数对象。(CODE TEST) 既然是Object函数,就肯定会有prototype属性,所以可以看到”Object.prototype”的值就是”Object {}”这个原型对象。反过来,当访问”Object.prototype”对象的”constructor”这个属性的时候,就得到了Obejct函数。

另外,当通过”Object.prototype._proto_”获取Object原型的原型的时候,将会得到”null”,也就是说”Object {}”原型对象就是原型链的终点了。

编辑:智能硬件 本文来源:JS原型、原型链深入理解

关键词: