欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript构造函数解析

程序员文章站 2022-04-05 14:57:47
...
构造函数的原理
JavaScript语言是一门面向对象的语言,但是JavaScript中并没有类的概念的。于是JavaScript采用构造函数的方式来模拟类的效果,即我们通过函数来创建对象。这也证明了函数在JavaScript中具有非常重要的地位。举个例子:


var Book = function(name, price) {
this.name = name;
this.price = price;
}

var java = new Book('Master Java', 82);

当使用new关键字来调用构造函数时,执行上下文从全局变量对象(window)变成一个空的上下文,这个上下文代表了新生成的实例。因此,this关键字指向当前创建的实例

默认情况下,如果你的构造函数中没有返回任何内容,就会返回this----当前的上下文,也就是你当前创建的对象。要不然就返回任意非原始类型的值。而普通的函数如果没有明显的返回值将返回undefined。

模拟构造函数创建对象
其实使用new创建一个对象的过程并不神秘,我们可以使用代码来模拟如何创建一个对象:


var Book = function(name) {
this.name = name;
};

//正常用法
var java = new Book(‘Master Java’);

//使用代码模拟,在非IE浏览器中测试,IE浏览器不支持
var python = {};
python.__proto__ = Book;
Book.call(python, 'Master Python');

将构造函数作为普通函数调用
实际上构造函数就是个普通的函数,可以当作普通函数调用的,例如var result = Book();,当然结果是undefined。区别在于函数中this的指向。我们重新修改一下上面的构造函数,


var Book = function(name, price) {
this.name = name;
this.price = price;
if (this == window) {
return 'name = ' + name + ", price = " + price;
}
}

这样当执行var result = Book("Java", 100)的结果是"name = Java, price = 100", 而var java = new Book("Java", 100)的结果就是创建了一个新的对象。JavaScript自带的构造函数好多就是既当普通函数又当构造函数的。比如String和Number,当String和Number作为构造函数来使用时,


var a = new Number(11);
var b = new Number(11.222);
var c = new String("hello");

当String和Number作为普通函数来使用时,他们可以用来作类型转换,即Number函数可以将其它类型转换为number类型,String函数可以将其它类型转换为字符串,


var a = Number('11'); //11
var b = Number('hello'); //NaN
var c = String(11); //'11'
var d = String(null); //'null'

总结
当一个函数要作为构造函数使用时通常将函数名首字母大写表示这是个构造函数,同时,一定要用new去调用构造函数。另外尽量不要把构造函数做普通函数使用,因为容易产生全局变量,同时如果处理不好返回值容易对构造函数自身的功能产生影响。

相关标签: JavaScript