手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Javascript 构造函数详解
Javascript 构造函数详解
摘要:一、什么是构造函数在一些面向对象的语言,如Java、C++、PHP中,构造函数是很常见的。在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);

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

【Javascript 构造函数详解】相关文章:

基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解

Javascript 字符串模板的简单实现

基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解

JavaScript实现简单的数字倒计时

javascript函数特点实例

JavaScript构造函数详解

javascript原型模式用法实例详解

JavaScript中的anchor()方法使用详解

JavaScript数据结构与算法之链表

JavaScript中的bold()方法使用详解

精品推荐
分类导航