javascript构造函数的深入探讨
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript构造函数的深入探讨,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3609字,纯文字阅读大概需要6分钟。
内容图文
![javascript构造函数的深入探讨](/upload/InfoBanner/zyjiaocheng/284/e6f5b603db59434399dc5801c6c30fb8.jpg)
我们相约在今天,在今天讨论javascript构造函数,感谢你如约而至
我们昨天前几天讨论过构造函数constructor,得出了结论
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构造函数的深入探讨的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的javascript构造函数的深入探讨全部内容,希望文章能够帮你解决javascript构造函数的深入探讨所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。