脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → Javascript 构造函数

Javascript 构造函数详解

 更新时间：2014年10月22日 11:34:50   投稿：hebedich  
Javascript构造函数是非常强大的，它可能也是Javascript能被充分利用的特点之一。但是如果你想真正的了解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);

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

您可能感兴趣的文章:

相关文章

  • 对xmlHttp对象的理解

    对xmlHttp对象的理解

    xmlHttp是一套在JavaScript脚本语言中通过Http协议传送或者接收XML及其他数据的API。
    2011-01-01
  • 深入了解javascript原型和原型链

    深入了解javascript原型和原型链

    本文详细讲解了javascript原型和原型链，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>
    2021-12-12
  • 推荐JavaScript实现继承的最佳方式

    推荐JavaScript实现继承的最佳方式

    本文是介绍了实用call方法结合原型链方法来实现javascript继承的最佳方式，非常的实用，有需要的小伙伴可以参考下
    2014-11-11
  • javascript中定义类的方法汇总

    javascript中定义类的方法汇总

    这篇文章主要介绍了javascript中定义类的方法汇总的相关资料,需要的朋友可以参考下
    2014-12-12
  • js切换div css注意的细节

    js切换div css注意的细节

    有些朋友在做div css js切换时,会碰到很多的问题，于是搜集整理了一下，拿出来和大家分享，希望可以帮助你们
    2012-12-12
  • Javascript中的数据类型之旅

    Javascript中的数据类型之旅

    JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据。
    2015-10-10
  • ES6学习总结之Set和Map的使用

    ES6学习总结之Set和Map的使用

    这篇博客介绍了 ES6 中的 Set 和 Map 数据结构,Set 是一个存储唯一值的集合,支持添加、删除、检查元素的方法,Map 则是用于存储键值对的集合,键和值都可以是任何类型,文章详细讲解了两者的主要方法和用法,并与传统的数组和对象进行了对比,突出 Set 和 Map 的独特优势
    2024-08-08
  • Javascript入门学习第六篇 js DOM编程

    Javascript入门学习第六篇 js DOM编程

    上篇文章纳闷的问题，将在这章和以后的几章里，慢慢搞定。 从今天起，开始学习DOM编程 让我们慢慢称为一名初级的js程序员。 然后往js匠人方向发展。
    2008-07-07
  • javascript实现playfair和hill密码算法

    javascript实现playfair和hill密码算法

    这篇文章主要介绍了javascript实现playfair和hill密码算法,需要的朋友可以参考下
    2014-12-12
  • 浅析document.ready和window.onload的区别讲解

    浅析document.ready和window.onload的区别讲解

    这篇文章主要介绍了document.ready和window.onload的区别，有需要的朋友可以参考一下
    2013-12-12

最新评论