JavaScript中,关于new的那些事

这篇文章是自己对new学习过程中的一些理解,有不对的地方希望指出,接受组织的批评教育。

导火线,前段时间学习jQuery的时候,看到源码中有这样一段:

jQuery = function(selector, context) {
    return new jQuery.fn.init(selector, context);
}

短时间内,对于我这种初学者来说,感觉信息量有点大。第一,jQuery.fn是什么东西;第二,new加上后面那一大串返回什么;第三,看上是jQuery的构造函数,为什么要这么折腾。

好,经过一段时间的研究,慢慢来解答。

首先,jQuery.fn就是jQuery.prototype,相当于给jQuery原型弄了个马甲,看起来短一些。

其次,init方法在jQuery的原型中有定义,大概做的几件事就是:

  1. 把selector与context传给jQuery选择器引擎Sizzle建立元素列表
  2. 返回jQuery实例对象

好,也就是说,不管怎么折腾,init返回的就是JQuery实例对象。接下来看一下某大神对new的一个说明:

只要new表达式之后的constructor返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象;如果返回(return)一个原始类型(无return时其实为return原始类型undefined),那么就返回new创建的匿名对象。

有了这段解答,那么,姑且猜测new jQuery.fn.init(selector, context)返回的就是jQuery对象。

接下来验证一下,先来代码:

function demo1 () {
    return {
        name: "Ichigo",
        firstName: "Kurosaki"
    }
}

function demo2 () {
    return ["bleach"];
}

function demo3 () {
    return function () {
        var str = "doNothing";
    }
}

function demo4 () {
    this.name = "Bruce";
    this.firstName = "Wayen";
    return this.name + " " + this.firstName;
}

console.log(new demo1()); // Object {name: "Ichigo", firstName: "Kurosaki"}
console.log(new demo2()); // ["bleach"]
console.log(new demo3()); // function () {var str = "doNothing";}
console.log(new demo4()); // demo4 {name: "Bruce", firstName: "Wayen"}

可以看到运行结果与描述一致,demo1-3都被构造函数的返回值覆盖了,demo4返回了一个原始类型,因此new操作之后返回的就是demo4匿名对象。要提一下的是,原始类型指的是String,Boolean,Number,Undefined,Null这5类。测试代码就不贴出来了。

好了,这下new在背后干的勾当已经基本弄清了,但是jQuery中还有一段定义init.prototype = jQuery.fn这就关系到jQuery实例方法跟属性的问题了,具体我就不再表达自己那些浅显的见解,有高手已经解答

,地址:http://www.zhangxinxu.com/wordpress/2013/07/jquery-%e5%8e%9f%e7%90%86-%e6%9c%ba%e5%88%b6/,感兴趣的同学可以去看。

时间: 2024-10-11 17:10:14

JavaScript中,关于new的那些事的相关文章

JavaScript中原型链的那些事

引言 在面向对象的语言中继承是非常重要的概念,许多面向对象语言都支持两种继承方式:接口继承和实现继承.接口继承制只继承方法签名,而实现继承继承实际的方法.在ECMAScript中函数没有签名,所以ECMAScript无法实现接口继承,只能实现实现继承.那么是怎么实现实现继承的呢??这就要说一说JS中的原型链了. 原型链的定义 什么是原型链?这个问题很简单,其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法. 我们先来回顾一下构造函数,原型,实例之间的关系.每一个构造函数都有一个原

JavaScript中使用正则表达式

      正则表达式又叫正规表示法,是一种表达文本模式的方法.通常是使用单个字符串来描述,匹配一系列符合某个规则的字符串.正则表达式是对字符串进行操作并且返回结果的一种工作方式,很多程序设计语言都对其进行了设计,而在JavaScript中对正则表达式的实现是基于perl的语法规则进行构建的.记得教我编程的老师说过“道士的驱魔符,医生的处方单,程序员的正则表达式”称为三个行业奇迹,表示非行业内的人很难弄懂到底是什么意思.其实正则表达式还是很容易入门的,但是要精通的话还是需要话一些时间的. 现在有

JavaScript中你可能不知道的九件事

今天凑巧去W3School扫了一遍JavaScript教程,发现从中看到了不少自己以前没有注意过的细节. 我这些细节列在这里,分享给可能同样不知道的朋友: 1.使用 document.write() 仅仅向文档输出写内容.如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖: 实例 <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>

JavaScript中面向对象那点事

鉴于自己在JavaScript这方面比较薄弱,所以就找了一本书恶补了一下(被称为犀利书的JavaScript权威指南).书的内容虽然多了点,但这也充分说明了js中的东西还是挺多的.虽然我们的定位不是前端,但最好还是了解一下js这个发展了将近20年但依然很火的技术. 两年前,写过一篇关于JavaScript闭包的博客,所以对闭包这个词印象很深,在看这书的时候,又看到了闭包,那么这次再看闭包,会有什么不同的理解呢? 大家都知道,在JavaScript中是没有类的概念的,更没有私有.公有的成员变量这样

(转载)JavaScript中面向对象那点事

鉴于自己在JavaScript这方面比较薄弱,所以就找了一本书恶补了一下(被称为犀利书的JavaScript权威指南).书的内容虽然多了点,但这也充分说明了js中的东西还是挺多的.虽然我们的定位不是前端,但最好还是了解一下js这个发展了将近20年但依然很火的技术. 两年前,写过一篇关于JavaScript闭包的博客,所以对闭包这个词印象很深,在看这书的时候,又看到了闭包,那么这次再看闭包,会有什么不同的理解呢? 大家都知道,在JavaScript中是没有类的概念的,更没有私有.公有的成员变量这样

【转】十个JavaScript中易犯的小错误,你中了几枪?

在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见证了在SPA开发.图形处理.交互等方面大量JS库的出现. 如果初次打交道,很多人会觉得js很简单.确实,对于很多有经验的工程师,或者甚至是初学者而言,实现基本的js功能几乎毫无障碍.但是JS的真实功能却比很多人想象的要更加多样.复杂.JavaScript的许多细节规定会让你的网页出现很多意想不到的bug,搞懂这些bug,对于成为一位有经验的JS开发者很重要. 常见错误一:对于this关键词的不正确引用 我曾经听一位喜

关于javascript中apply()和call()方法的区别

如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的”偏见”,因为这对您来说绝对是一片新大陆,让JavaScrip 好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上. 区分apply,call就一句话, foo.call(

javascript中this的指向问题

想学好javascript不是一件容易的事,而this就是其中一道坎,尤其是在用js进行面向对象开发的时候. 实际上,想要彻底搞懂this的指向确实不是一件容易的事,在<你不知道的javascript 上卷>一书中更是花了很大篇幅详细总结了this的四种指向情景.我在艰难的啃完这本书和大量阅读<javascript高级程序设计>.博文.以及大量实践中终于是弄懂了this.确实是,有些知识是需要反复验证.理解.总结,直至豁然开朗,构建成属于自己的理论体系. 那么进入正文: javas

JavaScript中的this关键字

"this"关键字是JavaScript中广泛应用的一种特性,但它经常也是这门语言中最容易混淆和误解的特性."this"的实际意义是什么?它是如何求值的? 本文试图以清晰的方式澄清和解释这问题的答案. 有过其他编程经验的人对"this"关键字并不陌生,大部分时候当通过构造函数实例化一个类的实例时,它指新创建的对象.例如,如果我有一个类Boat(),其拥有一个moveBoat()方法,当在moveBoat方法中引用"this"的

javascript中的正则表达式学习

一.前言 关于正则表达式自身的语法这里不做过多介绍(详情可参见http://www.php100.com/manual/unze.html),这里仅仅解释javascript中和正则表达式相关的几个方法的使用. 二.javascript中的RegExp对象 在javascript中,有两种方法可以构建正则: 正则表达式字面量 RegExp构造器 RegExp对象有以下属性: global:如果标识g,则为true ignoreCase:如果标识i被使用,则为true lastIndex:下一次e