通过一个轮播图插件来了解构造函数
例子:https://github.com/wayaha/rotateChart
在ES5中,构造函数的使用可以说是很能体现面向对象的编程思想,有学过c的同学,可以很明显体会到面向过程和面向对象的区别,不多瞎扯,这次通过一个轮播图的插件来理解一下构造函数;
1、关于对象的创建方式
常见的创建对象方式有:字面量和通过new + 构造函数的方式;
字面量的方式相对灵活、简单;缺点也很明显,用一个需要造一个,不便于复用和属性的继承如下;
var person = { name: 'Picker', age: 18 , doSomething: function (){ console.log('I`m a developer, I can write code.'); } }
另外通过new的方式创建,常用的获取时间通过new Date();当然自己可以定义构造函数,如下,这样可以创建一群这样的人。
function Person (name, age) { this.name = name; this.age = age; }; Person.prototype.doSomething =function (){ console.log('I`m a developer, I can write code.'); };<br />var me = new Person('Picker',18)
用起来方便,但是在new的时候构造函数内部也做了一堆的操作:
var me={}; me.__proto__ = Person.prototype; Person.call(me); return me;
a、创建一个对象;
b、把空对象的原型对象指向构造函数的原型对象,此时空对象可以访问构造函数原型链上的方法和属性,这个很关键;
c、通过call方法改变构造函数的this指向,并执行构造函数,此时的对象拥有了构造函数的属性和方法;
d、返回对象me,即我们new出来的实例,构造函数默认有隐式返回,当构造函数有return时候,视情况而定,如果返回值是基础类型,构造函数忽略它的存在,继续返回默认值,如果是对象的形式,会返回该对象,代替生成的实例。
2、构造函数的创建
a、构造函数默认使用大驼峰命名,首字母大写;
b、构造函数的初始化,可以通过上面例子的方式,也可以是通过Object.defineProperty();
function Person( name){ Object.defineProperty(this, "name"{ get :function(){ return name; }, set:function (newName){ name =newName; }, enumerable :true, configurable:true //可配置 }); } var me=new Person('Picker');
c、在构造函数中使用原型对象;
doSomething方法就是原型对象的方法;如果需要挂载到原型上的对象更多,可以使用字面量的方式,如:
Person.prototype ={ sayName :function(){ console.log(this.name); },
<span> doSomething =function<span> (){ console.log('I`m a developer, I can write code.'<span>); };
}
使用字面量形式改写了原型对象改变了构造函数的属性,因此他指向Object而不是Person。这是因为原型对象具有一个constructor属性。当一个函数被创建时,它的prototype属性也被创建,且该原型对象的constructor属性指向该构造函数。当使用对象字面量形式改写原型对象时,其constructor属性将被置为对象Object.为了避免这一点,需要在改写原型对象的时候手动重置constructor,如下:
Person.prototype ={ constructor = Person, sayName :function(){ console.log(this.name); }, doSomething =function (){ console.log('I`m a developer, I can write code.'); }; }
d、另外,在构造函数中this指向问题
箭头函数是不能用来创建构造函数的;
构造函数中定义方法使用 function() {},不要使用箭头函数,箭头函数中的this会指向window,而不是构造函数或者实例;
构造函数中关于事件绑定的函数,需要改变函数的this指向构造函数或者实例,如果需要的话;
相关推荐
是一道经常出现在前端面试时的问题。如果只是简单的了解new关键字是实例化构造函数获取对象,是万万不能够的。更深入的层级发生了什么呢?同时面试官想从这道题里面考察什么呢?下面胡哥为各位小伙伴一一来解密。