Javascript中創建函數的幾種方法


// 工廠函數模式
// 無法解決對象識別問題
function person0(name, age, job) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.job = job;
  return obj;
}
// ---------------------------------------------------
// 構造函數模式
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  // 這個方法實例化時,會創建兩次
  this.sayName = function() {
    alert(this.name);
  };
}

const person1 = new Person("test1", 19, "pig");
const person2 = new Person("test2", 19, "dog");

// ---------------------------------------------------
// 原型模式
// 初始化時無法自定義屬性
function Person1() {}
Person1.prototype.name = "looyulong";
Person1.prototype.age = age;
Person1.prototype.job = job;
Person1.sayName = function() {
  alert(this.name);
};
// ---------------------------------------------------
// 組合構造函數模式
// 構造函數定義屬性,原型模式定義方法
function Per(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}

Per.prototype = {
  constructor: Per,
  sayName: function() {
    alert(this.name);
  }
};

const per1 = new Per("test1", 19, "pig");
const per2 = new Per("test2", 19, "dog");

// ---------------------------------------------------
// 動態構造模式
// 就是加了一個判斷,判斷原型上面是否有對應的方法
function Person2(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  if (typeof this.sayName !== "function") {
    Person2.prototype.sayName = function() {
      alert(this.name);
    };
  }
}

// ---------------------------------------------------
// 寄生構造函數模式
// 在構造函數的內部返回一個對象,也就是new的時候返回一個對象
// 與工廠函數其實沒有很大區別,只是在寫法上,工廠函數創建對象需要執行一個函數
// 通過這種模式,可以達到和工廠函數相同的效果,但是卻是用new操作符調用的
function Person3(name, age, job) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.job = job;
  obj.sayName = function() {
    alert(this.name);
    alert(obj.name);
  };
  return obj;
}

// ---------------------------------------------------
// 穩妥構造函數模式
// 沒有公共屬性,沒有公共屬性,不用this
// 因為有些環境無法是用this和new
function Person4(name, age, job) {
  var obj = new Object();
  obj.getName = function() {
    return name;
  };
  obj.getAge = function() {
    return age;
  };
  obj.getJob = function() {
    return job;
  };
  obj.sayName = function() {
    alert(name);
  };
  return obj;
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM