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

JavaScript constructor

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/161059cvv39tqk4jmjn3jb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

默认,对象实例的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);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/161145we57a0f5tpp5p83t.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

再来看一段代码实例:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/161219tgz78vgeuv766u68.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

[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);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/161246n25da9ynkyy92kpd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

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

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

(3).为什么构造函数的原型对象的constructor属性也会指向Antzone呢,这里的原型对象并非由构造函数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);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/161320tr8kgr1qhqh6bcdz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

现象解释如下:

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

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/161407zx9eeuglzmqxze9q.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/161454o8iraanvica77nbv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

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

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/161529i7fc44ttpw3fi43x.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

代码实例如下:

[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);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/09/161602crjnqj7q7jmv17j5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

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

最新评论

返回顶部