`
Cykit
  • 浏览: 23800 次
最近访客 更多访客>>
文章分类
社区版块
存档分类

[学习笔记]javascript中new function()的返回值(并不一定是function的“实例”)

阅读更多

今天看mootools的Element源码时发现,Elenment的initialize有返回值,有点不解,initialize有返回值的话那么var div = new Element('div')的话div究竟是initialize的返回值还是一个Element实例。或许有的人会说,当然是Element实例啦。但是,虽然表面上看上去,div似乎是一个Element实例,然而事实上div不是一个Element实例,它是document.createElemetnt('div'),然后通过复制Element的prototype到div而来的。下面是Element的部分源码

js 代码
  1. var Element = new Class({     
  2.     initialize: function(el){   
  3.         if ($type(el) == 'string') el = document.createElement(el);   
  4.         return $(el);   
  5.     }   
  6.   
  7. });   
  8.   
  9. function $(el){   
  10.     if (!el) return false;   
  11.     if (el._element_extended_ || [window, document].test(el)) return el;   
  12.     if ($type(el) == 'string') el = document.getElementById(el);   
  13.     if ($type(el) != 'element') return false;   
  14.     if (['object', 'embed'].test(el.tagName.toLowerCase()) || el.extend) return el;   
  15.     el._element_extended_ = true;   
  16.     Garbage.collect(el);   
  17.     el.extend = Object.extend;   
  18.     if (!(el.htmlElement)) el.extend(Element.prototype);   
  19.     return el;   
  20. };   

上面的代码似乎说明了,只要new function()的function有返回值的话那么就应该返回function返回值,但是事实上呢?看下边的例子

js 代码
  1. function fn()   
  2. {   
  3.     this.k = 1;   
  4.     return 1;   
  5. }   
  6. fn.prototype = {   
  7.     j: 0   
  8. };   
  9. var f = new fn();  //  f = {}  

结果出乎意料,竟然是fn的实例({k:1, j:0});为什么又是function的实例了?继续看下面的实验,在fn中分别return各种数据类型的值,得出一下结果

js 代码
  1. return 1;                   f = {"j":0,"k":1}    
  2. return false;               f = {"j":0,"k":1}    
  3. return true;                f = {"j":0,"k":1}    
  4. return "string";            f = {"j":0,"k":1}    
  5. return null;                f = {"j":0,"k":1}    
  6. return undefined;           f = {"j":0,"k":1}    
  7.   
  8.   
  9. return new Number(1);           f = 值为1的Number对象   
  10. return new String("string");    f = 值为"string"的String对象   
  11. return new Boolean(true);       f = {}  
  12. return [1];                     f = [1]   
  13. return new Object();            f = {}  

注:Boolean在IE和FIREFOX似乎只要声明而没有定义,不管传入的是true还是false,返回的都是{},而且没有ToString()等方法。而且它的prototype也是{} 。其他浏览器没试过,还不清楚。不过估计也是一样的吧。
[修正]Boolean是有定义的,ToString()应该是toString();

实验的结论很明显,如果function的返回值是对象的话则返回该对象,否则返回function的实例

javascript真是一门神奇的语言,容易入门,但是其中的细节和一些技巧却不是一时半会能掌握,每次回过头学都能学到一些新的东西,好像怎么都学不完,继续加油。

分享到:
评论
4 楼 dxlamber 2009-09-23  
只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实为 return 原始类型 undefined),那么就返回 new 创建的匿名对象




本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/13895.htm


详细链接 http://www.jb51.net/article/13895.htm
3 楼 dreampuf 2009-08-03  
不过你的New函数好像还有一些瑕疵...比如new String 在Func.call的时候就会报错.提前把判断放前面比较完美吧..else return Func.call(y)..
2 楼 lord_is_layuping 2009-07-25  
对于var f = new fn();如果function的返回值是对象的话则返回该对象,否则返回function的实例。 

1 楼 sfh 2009-06-05  
个人感觉 new Func() 时,若Func有返回值且返回值为function或是object类型的话,则返回其返回值,否则,则返回一个空对象{}调用Func之后自身所转变成的对象也就是Func的实例,相当于:
function New(Func)
{
var y = {};
var z = Func.call(y); // 返回OutFoo的返回值
if((typeof(z)=="function") || (typeof(z)=="object")) return(z);
else return(y);
}

相关推荐

    很有价值的javascript学习笔记

    ### JavaScript 学习笔记知识点详解 #### 一、JavaScript 基础概念 - **JavaScript 与 Java 的区别**:JavaScript 和 Java 是两种完全不同的编程语言。Java 是一种静态类型语言,而 JavaScript 是动态类型的解释性...

    Javascript入门到精通系统视频笔记

    JavaScript中的函数是第一类对象,可以作为变量赋值、作为参数传递或作为其他函数的返回值。自定义函数使用`function`关键字定义,参数列表和返回值都是可选的。例如: ```javascript function myFunction(param1, ...

    JavaScript高级第01天笔记1

    在JavaScript中,函数是一种可重用的代码块,可以接受参数并返回值。函数定义有两种常见方式:函数表达式和函数声明。函数表达式如`var func = function() {}`,而函数声明则以`function func() {}`的形式出现。函数...

    TypeScript的学习笔记

    ### TypeScript 学习笔记 #### 1. 基本数据类型 TypeScript 扩展了 JavaScript 的数据类型系统,提供了以下几种基本的数据类型: - **`number`**:数值类型,JavaScript 中的所有数字都属于该类型。 - **`string`...

    《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析

    但要注意,`success` 回调函数中的 `return` 语句并不会使链式调用继续,因为 `success` 的返回值不会被链式调用捕获。因此,通常我们会通过其他方式来处理这种情况,比如使用 `.then()` 方法: ```javascript $....

    JavaScript语言基础知识点总结十张图

    JavaScript是Web开发中不可或缺的一部分,它是一种轻量级的、解释型的编程语言,主要用于增强网页的交互性。本文将基于“JavaScript语言基础知识点总结十张图”这一主题,深入探讨JavaScript的基础概念、语法特性...

    JavaScript学习笔记之JS函数

    JavaScript中的函数是基本且重要的概念之一,它是一段可以重复使用的代码块,用于执行特定任务。函数通过关键词function来定义,可以接受输入参数,执行相关代码后返回结果。 参数是函数接收数据的方式,允许用户向...

    JavaScript高级程序设计学习笔记(四)

    JavaScript高级程序设计学习笔记(四)主要探讨了JavaScript中的引用类型、Function类型、函数的声明与定义、函数表达式以及一些基本包装类型的相关知识。在JavaScript中,函数不仅仅是代码块,它们也是对象,具备...

    Javascript中call与apply的学习笔记

    JavaScript中的`call`和`apply`是两种非常重要的函数调用方式,它们允许开发者改变函数内部`this`的指向,并且能以不同的形式传递参数。本文主要探讨这两个方法的使用和区别。 首先,`call()`方法的基本用法是`fun....

    js第四天 js第四天笔记

    JavaScript,简称JS,是Web开发中的重要脚本...实际的学习笔记可能会更加具体,包括实例代码、问题解析和实践经验分享。在学习过程中,实践是非常重要的,结合实际项目进行练习,将有助于更好地理解和掌握JavaScript。

    javascript学习笔记(二) js一些基本概念

    在学习JavaScript的过程中,掌握一些基本概念是至关重要的,它们构成了这门语言的基石。以下是一些基本概念的详细介绍: 1. typeof操作符:typeof是用来检测给定变量的数据类型的JavaScript操作符。这个操作符返回...

    js理论与语法

    可以使用`function`关键字来定义函数,同时,函数也是JavaScript中的一等公民,这意味着函数可以作为参数传递给其他函数,也可以作为返回值从函数中返回。 ### 4. 对象(Object) 对象是JavaScript中用于表示现实世界...

    Javascript入门学习资料收集整理篇

    在这篇文章中,我们可以了解到如何为初学者准备和整理JavaScript的学习材料,以及一些基础教程的内容。文章被分为了九个部分,每个部分都有专门的内容,适合初学者循序渐进地学习。接下来将详细介绍这些部分的知识点...

    study:学习笔记

    在这个"study:学习笔记"中,我们将深入探讨JavaScript的核心概念、语法特点以及在实际开发中的应用。 1. **基础概念** - 变量:JavaScript中的变量是动态类型,使用`var`、`let`或`const`声明,可以根据需要改变其...

    bootcamp-react:训练营React学习笔记

    【React学习笔记——JavaScript基础篇】 在深入学习React之前,我们首先要对JavaScript有扎实的理解,因为React是构建在JavaScript之上的库。JavaScript是一种强大的、动态类型的脚本语言,广泛用于Web开发,它允许...

    w3cschool菜鸟教程离线版( 完整 )

    6. **AJAX**:Asynchronous JavaScript and XML,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。 7. **ES6及以后的新特性**:包括箭头函数、模板字符串、解构赋值、Promise、async/await等,...

    somewhere:一些无法归类的

    在这个名为“somewhere:一些无法归类的”的压缩包中,我们可以看到它主要包含了作者在2020年5月26日的读书心得以及讲座和自学的笔记,特别是与JavaScript相关的知识。JavaScript是一种广泛应用于网页和网络应用的...

    lessons

    "lessons"这个标题暗示我们这里涉及的是一系列关于JavaScript编程的教学资源,可能包括教程、笔记或者示例代码,旨在帮助学习者逐步掌握这门语言的基础和高级概念。 首先,让我们逐一解析课程内容: 1- **有条件**...

Global site tag (gtag.js) - Google Analytics