您的位置:首页> 前端教程> JS教程
文章导航

JavaScript constructor

2018-10-9 16:10| 作者: admin| 查看: 2885| 评论: 0|来自: 蚂蚁部落

constructor 翻译成汉语是构造器意思,有图为证:

蚂蚁部落

默认,对象实例的 constructor 属性指向创建此实例的构造器。

更多情况下,我们称构造器为构造函数。

代码实例如下:

[JavaScript] 纯文本查看 复制代码
function Antzone(){
  // code
}  
let ant=new Antzone();

上面代码,ant 是对象实例,Antzone 则是构造器,也就是构造函数。

那么 ant 的 constructor 属性指向构造器 Antzone。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(){
  // code
}  
let ant=new Antzone();
console.log(ant.constructor===Antzone);

代码运行效果截图如下:

蚂蚁部落

再来看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let str="蚂蚁部落";
let arr=["蚂蚁部落",4,"青岛市南区"];
console.log(str.constructor===String);
console.log(arr.constructor===Array);

代码运行效果截图如下:

蚂蚁部落

使用直接量方式创建字符串或者数组等对象实例,本质上内部还是采用构造函数创建。

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(webName){
  this.webName=webName;
}
Antzone.prototype.url="http://www.softwhy.com";
let antzone=new Antzone("蚂蚁部落");
console.log(antzone.constructor === Antzone);
console.log(Antzone.prototype.constructor===Antzone);

代码运行效果截图如下:

蚂蚁部落

代码分析如下:

(1).antzone 是构造函数 Antzone 的对象实例。

(2).那么很自然 antzone.constructor 会指向它的构造函数 Antzone。

(3).原型对象并非由构造函数 Antzone 创建,为什么构造函数的原型对象的 constructor 属性也会指向 Antzone 呢,是不是很奇怪,再来看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(webName){
  this.webName=webName;
}
Antzone.prototype={
  address:"青岛市南区",
  age:4
};
let antzone=new Antzone("蚂蚁部落");
console.log(antzone.constructor === Antzone);
console.log(Antzone.prototype.constructor===Antzone);

代码运行效果截图如下:

蚂蚁部落

上面代码的打印结果都是false,尤其是第一个结果更加令人难以理解。

因为antzone实实在在是Antzone的对象实例。

现象解释如下:

(1).构造函数内部并没有constructor属性,验证如下:

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(webName){
  this.webName=webName;
}
let antzone=new Antzone("蚂蚁部落");
console.log(antzone.hasOwnProperty("constructor"));

代码运行效果截图如下:

蚂蚁部落

hasOwnProperty方法可以判断指定属性是否是对象的自有属性,非原型链继承而来。

构造函数也是Function构造函数的实例,所以构造函数也是一个对象实例,它自然也有constructor属性,不过此时constructor是构造函数的静态属性。

关于静态属性和实例属性可以参阅JavaScript静态属性和实例属性一章节。

(2).实质上,默认构造函数prototype原型对象是有Object()构造函数创建。

虽然实质上如此,但是ES依然会人为的将prototype对象的constructor属性指向构造函数。

否则将无法判断一个对象实例具体由哪一个构造函数创建。

再回到前面令人疑惑的代码:

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(webName){
  this.webName=webName;
}
Antzone.prototype={
  address:"青岛市南区",
  age:4
};
let antzone=new Antzone("蚂蚁部落");
console.log(antzone.constructor === Antzone);
console.log(Antzone.prototype.constructor===Antzone);

代码运行效果截图如下:

蚂蚁部落

代码分析如下:

上面代码是重置对象原型,而不是修改对象原型,也就是更换了一个新的原型对象,所以原型对象的constructor属性就不再是人为的指向构造函数的情况,而是指向它真正的构造函数Object:

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(webName){
  this.webName=webName;
}
Antzone.prototype={
  address:"青岛市南区",
  age:4
};
let antzone=new Antzone("蚂蚁部落");
console.log(antzone.constructor === Object);

代码运行效果截图如下:

蚂蚁部落

所以上述代码需要进行一下修改,否则就无法判断出对象实例是由谁创建的。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(webName){
  this.webName=webName;
}
Antzone.prototype={
  address:"青岛市南区",
  age:4
};
Antzone.prototype.constructor=Antzone;
let antzone=new Antzone("蚂蚁部落");
console.log(antzone.constructor === Antzone);

代码运行效果截图如下:

蚂蚁部落

只要将原型对象的constructor属性重新指向构造函数即可。

3

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (3 人)

上一篇:location.pathname下一篇:location.assign()

最新评论

返回顶部