首页 > web前端 > js教程 > 正文

Javascript什么是构造函数?如何使用构造函数实例详解

伊谢尔伦
发布: 2017-07-25 13:20:39
原创
2181 人浏览过

什么是构造函数

在一些面向对象的语言,如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什么是构造函数?如何使用构造函数实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板