javascript Object与Function使用_javascript技巧

如今的JavaScript再也不是以前被当做玩具的在网页上运行的花哨的脚本了。JavaScript已经逐渐标准化,作为一门真正的编程语言广泛地应用在Web开发上。因此,越来越多的人开始重新认识这门脚本语言,并在不断地探索关于JavaScript核心思想和实现原理,过程中遇到了一些非常混淆的问题。本文着重解释一个比较常见但是非常容易使开发人员或者是初学JavaScript的人非常混淆的问题,那就是两个核心构造函数Object和Function,他们之间到底有什么关系?为何instanceof运算符的返回结果会让你感到混淆?本文将为你一一道来。不过在这之前,我们需要先了解一些JavaScript中的概念和基本的运行机制。

JavaScript的对象体系结构

其实在JavaScript语言中,整个核心的体系结构都围绕着两个构造函数Object和Function来构建的。我将引用来自mollypages.org的一张JavaScript对象体系结构图来说明。

instanceof 运算符
instanceof是一个二元运算符,如:A instanceof B. 其中,A必须是一个合法的JavaScript对象,B必须是一个合法的JavaScript函数 (function). 判断过程如下:
如果函数B在对象A的原型链 (prototype chain) 中被发现,那么instanceof操作符将返回true,否则返回false.
例如下面的代码会返回true.

// return true if specified function is found// in the object's prototype chain as a constructor.alert({} instanceof Object);

JavaScript中的原型链(prototype chain)机制
这里简单概括一下,因为这个话题需要很大篇幅去讨论,本文只是引用了这个概念,重点并非详细讨论该机制。
JavaScript中的原型(prototype)是和函数(function)紧密相连的,因为每个函数默认都会有一个属性叫prototype, 每一个通过函数和new操作符生成的对象都具有一个属性__proto__, 这个属性保存了创建它的构造函数的prototype属性的引用。这个__proto__对象就是实现原型链的核心对象。JavaScript是一门面向对象的编程语言,它的继承特性其实就是通过原型链机制来实现的。同时,instanceof运算符也需要在原型链的支持。我们举例说明:

代码

复制代码 代码如下:

// create a custom constructor Foo
function Foo() {
}
// create an insatnce of Foo
var foo = new Foo();

// foo is an instance of Foo
alert(foo instanceof Foo);// true
// foo is also an instance of Object because
// Foo.prototype is an instance of Object.
// the interpreter will find the constructor
// through the prototype chain.
alert(foo instanceof Object);// true

// Prototype chain of the object foo
//
// __proto__ __proto__ __proto__
// foo -----------> Foo.prototype -----------> Object.prototype -----------> null

// But foo is not an instance of Function, because
// we could not find Function.prototype in foo's
// prototype chain.
alert(foo instanceof Function);// false

// However, its constructor Foo is an instance of
// Function.
alert(Foo instanceof Function);// true
// it's also an instance of Object
alert(Foo instanceof Object);// true

// Prototype chain of the constructor Foo
//
// __proto__ __proto__ __proto__
// Foo -----------> Function.prototype -----------> Object.prototype -----------> null

从上面的代码来分析,我们不难得出这样一个结论:任何对象的原型链最后都能追溯到Object.prototype. 这也就是我们为什么说JavaScript中所有的对象都继承自Object的原因了。

为何Object instanceof Function和Function instanceof Object都返回true?
Object, Function, Array等等这些都被称作是构造“函数”,他们都是函数。而所有的函数都是构造函数Function的实例。从原型链机制的的角度来说,那就是说所有的函数都能通过原型链找到创建他们的Function构造函数的构造原型Function.protorype对象,所以:

alert(Object instanceof Function);// return true
与此同时,又因为Function.prototype是一个对象,所以他的构造函数是Object. 从原型链机制的的角度来说,那就是说所有的函数都能通过原型链找到创建他们的Object构造函数的构造原型Object.prototype对象,所以:

alert(Function instanceof Object);// return true
有趣的是根据我们通过原型链机制对instanceof进行的分析,我们不难得出一个结论:Function instanceof Function 依然返回true, 原理是一样的
1. Function是构造函数,所以它是函数对象
2. 函数对象都是由Function构造函数创建而来的,原型链机制解释为:函数对象的原型链中存在Function.prototype
3. instanceof查找原型链中的每一个节点,如果Function.prototype的构造函数Function的原型链中被查到,返回true
因此下面代码依然返回true

alert(Function instanceof Function);// still true

结论
1. 在JavaScript语言中,一切的一切都是对象,它们全部继承自Object. 或者说所有对象的原型链的根节点都是Object.prototype
2. 理解原型链机制在JavaScript中式如何工作的是非常重要的。掌握了它,不管一个对象多么复杂,你总能够轻而易举地将它攻破。

时间: 2024-09-19 02:00:28

javascript Object与Function使用_javascript技巧的相关文章

javascript中的 object 和 function小结_javascript技巧

在学习过传统的面向对象语言后,如 java c++,转学 javascript 却有点不适应,特别是 javascript 中所谓的 object(对象) function(函数),有时候会被搞晕.于是乎简单整理了下面的一些概念性的东西,方便学习和理解,会结合一点 java面向对象的知识加以说明. 先了解几个概念: 1.首先 Object 在 ECMAScripe 中是指什么,在 ECMAScripe 中有5种简单数据类型:Undefined,Null,Boolean,Number,String

浅谈Javascript中Object与Function对象_javascript技巧

1.Object对象   原型对象           原型是对象的一个属性,也就是prototype属性,每个对象都有这个内部属性,而且他本身也是一个对象. <script type="text/javascript"> Object.prototype.num= 10; alert("添加原型对象属性:"+ Object.num); Object.num = 20; alert("添加对象属性:"+Object.num); <

深入浅析JavaScript中的Function类型_javascript技巧

Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法.正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针. 2. 常用的函数定义方式 1. 函数声明: function sum(a , b ){ return a+b; } 2. 表达式: va

JavaScript中的Function函数_javascript技巧

首先给大家介绍JavaScript中function定义函数的几种方法: 1.最基本的作为一个本本分分的函数声明使用. 复制代码 代码如下: function func(){} 或 复制代码 代码如下: var func=function(){}; 2.作为一个类构造器使用: function class(){} class.prototype={}; var item=new class(); 3.作为闭包使用: (function(){ //独立作用域 })(); 4.可以作为选择器使用:

你可能不知道的JavaScript的new Function()方法_javascript技巧

我们大多数人都使用过JavaScript,近年来随着各种JavaScript框架的流行使得JavaScript变得更加神奇和容易."Anonymous (匿名)函数?不知道那是什么但是看起来和自己所写的差不多."你可能并不知道可以传给 new Function() 一个字符串作为函数的body来构造一个 JavaScript函数.编程中并不经常用到,但有时候应该是很有用的. 下面是 new Function 的基本用法: 复制代码 代码如下: // 最后一个参数是函数的 body(函数

JavaScript中Function函数与Object对象的关系_javascript技巧

Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 今天我们来尝试理解Function和Object.因为这个里面有些人前期可能会搞糊涂.他们之间到底是什么关系.当然也不除外当初的我. 注意:官方定义: 在Javascript中,每一个函数实际上都是一个函数对象. 我们先来看最简单的两个代码,也是最容易理解的. function fn(){} var obj = {}

JavaScript知识点总结(十一)之js中的Object类详解_javascript技巧

JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1

浅谈javascript对象模型和function对象_javascript技巧

javascript中,函数就是对象 复制代码 代码如下: <html> <head> <script type="text/javascript"> function add(number){     alert(number+20); } var add=function(number){ alert(number+20); } function add(number,number1){     alert(number+30); } var a

JavaScript中使用Object.create()创建对象介绍_javascript技巧

对于对象的创建,除了使用字面量和new操作符,在ECMAScript 5标准中,还可以使用Object.create()来进行.Object.create()函数接受2个对象作为参数:第一个对象是必需的,表示所创建对象的prototype:第二个对象是可选的,用于定义所创建对象的各个属性(比如,writable.enumerable). 复制代码 代码如下: var o = Object.create({x:1, y:7}); console.log(o);//Object {x=1, y=7}