小编给大家分享一下javascript构造函数有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 创新互联建站是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于成都网站制作、网站建设、软件开发、设计服务业务。我们始终坚持以客户需求为导向,结合用户体验与视觉传达,提供有针对性的项目解决方案,提供专业性的建议,创新互联建站将不断地超越自我,追逐市场,引领市场!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构造函数有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享标题:javascript构造函数有什么用-创新互联
链接URL:http://lswzjz.com/article/djghei.html