成都创新互联网站制作重庆分公司

javascript构造函数有什么用

小编给大家分享一下javascript构造函数有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

10年积累的成都网站设计、网站建设、外贸网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先制作网站后付款的网站建设流程,更有米东免费网站建设让你可以放心的选择与我们合作。

constructor是原型对象上的一个属性,默认指向这个原型的构造函数

这个结论貌似对我们平时的工作中似乎并没有什么用处,那构造函数,就真的没什么用处吗?

使用构造函数构造可以复用的对象

JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。

在我们平时工作中,经常会需要我们创建一个对象,而我们更多的是使用对像直接量,直接创建,举个栗子,代码如下

var person = {
    name:'postbird',
    address:'earth',
    sayHello:function(){console.log('Hello,I am ' + this.name);}
};

如果只是一个单独的对象,对象的属性和方法基本不会变了,这么玩完全可以,但是如果你的对象有很多实例,或者涉及继承或者构造函数传参,留意代码注释

//创建了一个构造函数
function Person(name,address){
    this.name = name;
    this.address = address;
}
//为构造函数的原型对象添加一个方法sayHello
Person.prototype.sayHello = function(){
    console.log('Hi I am ' + this.name);
}
//通过构造函数Person实例化一个p1,并传参
var p1 = new Person('postbird','earth');
//通过构造函数Person实例化一个p2,并传参
var p2 = new Person('ptbird','month');
console.log(p1);//{name: "postbird", address: "earth"}
console.log(p2);//{name: "ptbird", address: "month"}
// p1和p2 继承了Person的sayHello方法
p1.sayHello()//Hi I am ptbird
p2.sayHello()//Hi I am postbird

耐心品位上面的代码,这样的可扩展性就会更好,可以创N个实例,实现代码复用

经典案例

关于js的constructor构造函数,有一个很经典的demo

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //true
var one = new father(25);
console.log(one.constructor===Father) // true

注意这一行代码

Father.prototype.constructor = Father;//修正

为什么要修正?不是说constructor是原型对象上的一个属性,默认指向这个原型的构造函数?
我们把这一行打码注释掉

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
//Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //false
var one = new Father(25);
console.log(one.constructor===Person) // true

聪明如你,相信你已经发行了问题所在

Father.prototype = new Person('Beijin');

这一步的时候,原型指向了一个新对象,这个新对象的constructor指向的是Person。

console.log((new Person('Beijin')).__proto__ === Person.prototype) //true

前面我们说过new Person('Beijin')对象是没有prototype的,prototype只有函数才有;Father.prototype.constructor将会沿着new Person('Beijin')的原型链向下查找constructor,new Person('Beijin')没有constructor就去它的__proto__找,因为(new Person('Beijin'))._proto_ === Person.prototype而Person.prototype.constructor ==  function Person(),所以 Father.prototype.constructor == Person.prototype.constructor //function Person()当我们var one = new Father(25) 时 ,one.constructor = Father.prototype.constructor,所以one.constructor指向function Person(),所以,一定要进行修正,否则原型链会乱

以上是“javascript构造函数有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页名称:javascript构造函数有什么用
浏览路径:http://cxhlcq.com/article/psioej.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部