Javascript 构造函数详解

一、什么是构造函数

在一些面向对象的语言，如Java、C++、PHP中，构造函数是很常见的。在Javascript中构造函数首先是一个普通的函数，它可以使用new 操作符来调用，并生成一个特殊类型的对象。

代码如下:

// "Benjamin" is a constructor
var benjamin = new Benjamin("zuojj", "male");

在上面这个实例中benjamin是一个Benjamin对象，那么它是如何来实例化的呢？

代码如下:

function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);

正如我们所看到的，“Benjamin”构造函数仅仅是接收传递过来的参数，并把它们赋值给this对象。这是因为当构造函数被new操作符调用时，构造函数的this对象赋值为new操作返回的对象。
这意味着上面的代码等同于：

代码如下:

benjamin = {
 "username": "zuojj",
 "sex": "male"
}

二、为什么使用构造函数

为什么使用构造函数，有以下几个方面的原因：
1.使用构造函数，意味着所有的这些对象，都可以使用相同的基本结构创建
2.使用构造函数，意味着“benjamin”对象被明确的标记为“Benjamin”函数的实例

代码如下:

function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = {
 "username": "zuojj",
 "sex": "male"
}
//Outputs: true
console.log(benjamin instanceof Benjamin);
//Outputs: false
console.log(ben instanceof Benjamin);

3.使用构造函数，意味着我们可以在原型上定义公共方法，供多个实例共享

代码如下:

function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
Benjamin.prototype.getName = function() {
 return this.username;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = new Benjamin("lemon", "female");
//Outputs: zuojj
console.log(benjamin.getName());
//Outputs: lemon
console.log(ben.getName());

三、注意事项

1.new 关键字
在实例化构造函数的时候一定不要忘了使用new关键字，是否使用new关键字，对this对象的影响很大，不用new关键字的情况下，this对象会指向全局对象（window in browser and global in node）。因此定义构造函数时，建议函数名称首字母大写。
2.如果被调用的函数没有显式的 return 表达式，则隐式的会返回 this 对象 – 也就是新创建的对象，否则将会影响返回的结果，但仅限于返回的是一个对象

代码如下:

function Bar() {
    return 2;
}
var bar = new Bar();
//返回新创建的对象
//Outputs: Bar {}
console.log(bar);
function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
var test = new Test();
//返回的对象
//Outputs: Object {foo: 1}
console.log(test);

我们需要注意的是：
a) new Bar() 返回的是新创建的对象，而不是数字的字面值 2。 因此 new Bar().constructor === Bar，但是如果返回的是数字对象，结果就不同了;
b) 这里得到的 new Test()是函数返回的对象，而不是通过new关键字新创建的对象，如下所示：

代码如下:

function Bar() {
    return 2;
}
var bar = new Bar();
function BarN() {
 return new Number(2);
}
var barn = new BarN();
//Outputs: true
console.log(bar.constructor === Bar);
//Outputs: Number {}
console.log(barn);
//Ouputs: false
console.log(barn.constructor === BarN);
//Outputs: true
console.log(barn.constructor === Number);
/* -------------------------------------- */
function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
var test = new Test();
//Outputs: undefined
console.log(test.value);
//Ouputs: 1
console.log(test.foo);

以上就是对构造函数的总结，希望对初学者有所帮助，文中不妥之处，望批评、斧正。

赞 (0)

相关推荐

  • JavaScript截取字符串的Slice、Substring、Substr函数详解和比较

    在JavaScript中,提取子字符串主要是通过 Slice.Substring.Substr 三个方法之一. 复制代码 代码如下: // slice // 语法: string.slice(start [, stop])"Good news, everyone!".slice(5,9); // 'news' // substring // 语法: string.substring(indexA [, indexB])"Good news, everyone!".s

  • JavaScript函数详解

    简介 在很多传统语言(C/C++/Java/C#等)中,函数都是作为一个二等公民存在,你只能用语言的关键字声明一个函数然后调用它,如果需要把函数作为参数传给另一个函数,或是赋值给一个本地变量,又或是作为返回值,就需要通过函数指针(function pointer).代理(delegate)等特殊的方式周折一番. 而在JavaScript世界中函数却是一等公民,它不仅拥有一切传统函数的使用方式(声明和调用),而且可以做到像简单值一样赋值.传参.返回,这样的函数也称之为第一级函数(First-cla

  • JavaScript中的apply和call函数详解

    第一次翻译技术文章,见笑了! 翻译原文: Function.apply and Function.call in JavaScript 第一段略. 每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象.看一下 这篇文章 ,复习一下(refresher)JavaScript特性.你可能还想知道JavaScrip

  • JavaScript中的eval()函数详解

    eval("1+2"),-> 3 动态判断源代码中的字符串是一种很强大的语言特性,几乎没有必要在实际中应用.如果你使用了eval(),你应当仔细考虑是否真的需要使用它. 一.eval()是一个函数还是一个运算符 eval()是一个函数,但由于它已经被当成运算符来对待了..JavaScript语言的早期版本定义了eval函数,现代JavaScript解释器进行了大量的代码分析和优化.而eval的问题在于,用于动态执行的代码通常来讲不能分析,换句话说,如果一个函数调用了eval,那么

  • JavaScript入门之基本函数详解

    总的来说,函数在JavaScript中可以: ◆ 被赋值给一个变量 ◆ 被赋值为对象的属性 ◆ 作为参数被传入别的函数 ◆ 作为函数的结果被返回 ◆ 用字面量来创建 函数对象 1.1 创建函数 创建JavaScript函数的一种不长用的方式(几乎没有人用)是通过new操作符来作用于Function"构造器": 复制代码 代码如下: var funcName = new Function( [argname1, [... argnameN,]] body ); 参数列表中可以有任意多的参

  • javascript字母大小写转换的4个函数详解

    js中实现字母大小写转换主要用到了四个js函数: 1.toLocaleUpperCase2.toUpperCase3.toLocaleLowerCase4.toLowerCase 下面就这四个实现大小写转换的js函数逐一做简单的分析. 1.toLocaleUpperCase 将字符串中所有的字母字符都将被转换为大写的,同时适应宿主环境的当前区域设置. 2.toUpperCase 将字符串中的所有字母都被转化为大写字母. 3.toLocaleLowerCase 将字符串所有的字母字符都被转换为小写

  • javascript 回调函数详解

    回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数.因此callback

  • javascript的数组和常用函数详解

    1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象.Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能. 1.1 定义数组 声明有10个元素的数组: 复制代码 代码如下: var a = new Array(10); 此时为a已经开辟了内存空间,包含10个元素,用数组名称加 [下标] 来调用,例如 a[2] 但此时元素并未初始化,调用将返回 undefined.以下代码定义了个可变数组,并

  • Javascript 构造函数详解

    一.什么是构造函数 在一些面向对象的语言,如Java.C++.PHP中,构造函数是很常见的.在Javascript中构造函数首先是一个普通的函数,它可以使用new 操作符来调用,并生成一个特殊类型的对象. 复制代码 代码如下: // "Benjamin" is a constructor var benjamin = new Benjamin("zuojj", "male"); 在上面这个实例中benjamin是一个Benjamin对象,那么它是

  • JavaScript构造函数详解

    JavaScript构造函数详解

    构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 构造函数注意事项: 1.默认函数首字母大写 2.构造函数并没有显示返回任何东西.new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型. 3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回.如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回. function Person( name){ this

  • javascript设计模式之对象工厂函数与构造函数详解

    下面通过文字详解加代码分析的方式给大家分享下javascript设计模式之对象工厂函数与构造函数的相关知识. 概述使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法.然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象.1).使用工厂函数创建对象我们可以编写一个函数,此函数的功能就是创建对象,可将其. 概述 使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法. 然而,除了这两种常用的对象创建方式,JavaScript还提

  • COM组件中调用JavaScript函数详解及实例

    COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

  • 在Node.js中使用Javascript Generators详解

    Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

  • JavaScript cookie详解及简单实例应用

    JavaScript cookie详解 一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活.     二.cookie的基本属性     每个cookie都有四个可

  • javascript 实例详解循环用法

    javascript 实例详解循环用法

    闲来无聊,整理了几道有关循环的简单练习题,希望对初学JS的小伙伴有所帮助. 1.打印1-100之间所有7的倍数的个数及总和 var sum=0; var n=0; for(var i=1;i<=100;i++){ if(i%7==0){ sum+=i; ++n; } } console.log("个数为:"+n+",总和为:"+sum); 运行结果: 2.假设投资的年利率为5%,从1000增到5000需要多少年? var money=1000; var i=0

  • JavaScript 模块化详解

    JavaScript 模块化详解

    目录 前言: 1.概念 2.模块化的好处 3.引入多个script标签后出现的问题 一.CommonJS 二.AMD 三.CMD 四.ES6模块化 前言: 1.概念 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起: 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信. 2.模块化的好处 避免命名冲突(减少命名空间污染): 更好的分离, 按需加载: 更高复用性: 更高可维护性. 3.引入多个script标签后出现的问题 请求过多(依赖的模

  • C++构造函数详解

    文章转自公众号:Coder梁(ID:Coder_LT) 上一篇文章我们介绍了定义了类,在使用之前,往往还需要对类进行初始化.这篇介绍的就是对类进行初始化的方法. 像是结构体,我们可以使用列表初始化的方法进行初始化: struct Thing {     char *pn;     int m; }; Thing th = {"hello", 23}; 但类不行,因为结构体当中的成员变量都是public的,而类往往是私有的.这意味着我们不能直接用程序访问数据成员,需要设计成函数. 在C+

  • c++特殊构造函数详解

    目录 前言 拷贝构造函数 一.什么是拷贝构造函数 二.调用时机 注意 浅拷贝和深拷贝 总结 前言 众所周知,构造函数的作用是类在创建对象时的初始化,而拷贝构造函数则是构造函数里的一种特殊构造. 拷贝构造函数 拷贝构造:是C++特有的,他是一种特殊的构造函数 用于基于一个同一个类的的第一个对象去创造和初始化的一个对象 第一的参数是本类的对象的引用(const) 一.什么是拷贝构造函数 一种特殊的构造函数,同一个类的一个对象去创造或初始化一个对象 在没写的时候,是默认存在的,自己写了之后,系统默认的

随机推荐