通过一个轮播图插件来了解构造函数

2018-06-24 02:04:31来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

例子: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.');
};
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);
      },
    doSomething =function (){
        console.log('I`m a developer, I can write code.');
    };
 }

    使用字面量形式改写了原型对象改变了构造函数的属性,因此他指向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指向构造函数或者实例,如果需要的话;

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Webpack学习 - Webpack安装及安装

下一篇:如何更好的编写async函数