1. 程式人生 > >通過一個輪播圖插件來了解構造函數

通過一個輪播圖插件來了解構造函數

num 類型 bsp 函數的原型 size cti type屬性 箭頭 true

例子: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指向構造函數或者實例,如果需要的話;

通過一個輪播圖插件來了解構造函數