我们相约在今天, 在今天讨论 JavaScript 构造函数, 感谢你如约而至
昨天
我们昨天前几天讨论过构造函数 constructor, 得出了结论
constructor 是原型对象上的一个属性, 默认指向这个原型的构造函数
这个结论貌似对我们平时的工作中似乎并没有什么用处, 那构造函数, 就真的没什么用处吗?
今天
使用构造函数构造可以复用的对象
JS 中的函数即可以是构造函数又可以当作普通函数来调用, 当使用 new 来创建对象时, 对应的函数就是构造函数, 通过对象来调用时就是普通函数.
image
在我们平时工作中, 经常会需要我们创建一个对象, 而我们更多的是使用对像直接量, 直接创建, 举个栗子, 代码如下
- 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(),
所以, 一定要进行修正, 否则原型链会乱
来源: http://www.jianshu.com/p/d4e9291b84d0