JS進階程式設計2

標籤：ble   win   dog   函數   min   asc   一般模式   value   delete   

物件導向 ，基本模式、對象字面量模式、原廠模式、建構函式模式、原型模式、組合建構函式和原型模式、其他模式見電子書：動態原型模式、寄生建構函式模式（不推薦）、穩妥建構函式模式（要求安全的環境，不使用new 和 this）

//物件導向/* 【 資料屬性】*  configurable  true 通過 delete刪除屬性來修改屬性*  enumberable  true  通過 for-in 返回屬性*  writable true 修改屬性值*  value 資料值*  es5 通過 Object.defineProperty(obj,屬性名稱，對象{} ) 可對以上修改*  屬性名稱為 configurable/enumerable/writable/value*  把 configurable 設定為 false後，就無法再設定為true 了，*  調用 Object.defineProperty() 預設屬性名都為 false* */var person = {}Object.defineProperty(person,"name",{  writable: false,  // 阻止修改屬性值  value:‘xiaoming‘})console.log(person.name)person.name = ‘xxx‘;console.log(person.name)/* 【訪問器屬性】* configurable  false* enumerable* get函數  預設 undefined* set函數  預設 undefined* 添加get set函數* */var book = {  _year: 2014,  // 底線表示只能通過對象方法訪問的屬性，可直接存取  edition:1}Object.defineProperty(book,‘year‘,{  get:function () {    return this._year  },  set:function (val) {    if(val> 2014){      this._year = val      this.edition += val - 2004    }  }})book.year = 2015;console.log(book.edition);console.log(book._year);/* 同時定義多個屬性用   Object.defineProperties() 複數 *//* 通過 Object.getOwnPropertyDescriptor() 可查看 資料屬性和 訪問器屬性各個值*  js中任何對象，包括DOM對象和BOM對象都有 Object.getOwnPropertyDescriptor() 方法** */var desc =Object.getOwnPropertyDescriptor(book,‘_year‘)console.log(desc.value);console.log(desc.configurable);var desc2 =Object.getOwnPropertyDescriptor(book,‘year‘)console.log(desc2.value);  // undefinedconsole.log(desc2.configurable); // false/* 【1.一般模式 】*/var obj = new Object()obj.name=‘name‘console.log(‘name: ‘+obj.name);/* 2.對象字面量 */var obj2 = {  name: ‘mama‘}console.log(‘mama: ‘+obj2.name);/*【 3.原廠模式】 */function cretePerson(name,age) {  var o = new Object();  o.name = name;  o.age = age;  o.sayName =function () {    console.log(‘xx: ‘ + this.name);  }  return o;}var person1 = cretePerson(‘kang‘,22)person1.sayName()/* 【4.建構函式模式】*/function Person(name, age) {  this.name=name;  this.age=age;  this.sayName2=function () {    console.log(this.name + ‘abccde‘)  // 等同於  this.sayName2 = new Function(‘...‘) 每次執行個體化都會 new Function(),這是缺陷  }}var per2 = new Person(‘xiao‘,33) // Person() 當成建構函式用，有 newper2.sayName2()console.log(per2 instanceof Person);// Person(‘kangddd‘,44) //  Person() 當成普通函數用，// window.sayName2();var per3 = new Person(‘aa‘,33)var per4 = new Person(‘bb‘,33)  // 執行個體化兩個對象，裡面有 sayName() 方法，ECMAScript中函數也是對象，每定義一個函數，就是執行個體化一個對象console.log(‘ddd333‘ + (per3 == per4));  // + 號優先順序比 == 高console.log(‘eeefff‘ + false);/* 【5.原型模式】* 每個函數都有 prototype(原型)屬性，是一個指標，指向一個對象* 對象執行個體共用 prototype 定義的屬性和方法* */function PersonSix() {}PersonSix.prototype.name = ‘li‘PersonSix.prototype.sayName3=function () {  console.log(this.name);}var per10 = new PersonSix();per10.sayName3() // 先尋找 per10有沒有sayName3()方法，有則返回，沒有則尋找 prototype是否有 sayname3()方法/* 每建立一個函數，都有prototype */function test() {  return 1}console.log(test); // 輸入函數  function test(){}console.log(test.prototype); // 返回一個對象  每建立一個函數，都有 prototypeconsole.log(test.prototype.constructor);  //  返回 函數  function test(){}function Person100() {}Person100.prototype.name=‘100name‘Person100.prototype.age=‘100age‘var p100 = new Person100()var p101 = new Person100()p100.name = ‘110name‘  // 執行個體中新增同名屬性覆蓋 原型中的 nameconsole.log(p100.name);  //  ‘110name‘console.log(p101.name); //   ‘100name‘delete p100.name;  // 通過  delete 可以找回 原型中的 nameconsole.log(p100.name); //   ‘100name‘console.log(p100.hasOwnProperty(‘name‘));  //  判斷執行個體是否有某屬性  hasOwnPropertyconsole.log(‘name‘ in p100);  // name存在於執行個體或者原型都會返回 trueconsole.log(Object.keys(Person100.prototype));  // [‘name‘,‘age‘] 拿到所有原型屬性的數組console.log(Object.getOwnPropertyNames(Person100.prototype));  // [‘constructor‘,‘name‘,‘age‘] 拿到所有原型屬性的數組console.log(‘ok ? ‘ + (p100.constructor == Person100));  // 簡化前 這裡是 true/* 簡化原型文法*/function Car() {}Car.prototype={  constructor: Car, // 手動指定 constructor ,省略後， car.constructor 就不再指向  Car  name:‘baoma‘,  age:22}var car = new Car()console.log(car.name);console.log(Car.prototype.constructor);console.log(car.constructor == Car);  // 簡化後，這裡返回 false/* 在 String.prototype中可以找到 substring() 方法 *//* 原型模式的缺陷是 如果對象中的屬性是參考型別，如 數組 ， 那麼某個執行個體修改了數組，另一個執行個體也拿到了修改後的資料  */function Dog() {}Dog.prototype={  constructor:Dog,  friends:[‘kang‘,‘jia‘]}var f1 = new Dog()var f2 = new Dog()f1.friends.push(‘hehe‘)console.log(f1.friends);  // [‘kang‘,‘jia‘,‘hehe‘]console.log(f2.friends); // [‘kang‘,‘jia‘,‘hehe‘]/* 【組合使用建構函式械和原型原式 】*/function Pig(name,age) {  // 屬性寫在建構函式中  this.name = name;  this.age= age;  this.friends = [‘dd‘,‘ee‘]}Pig.prototype={     // 方法寫在原型中  constructor: Person,  sayName:function () {    console.log(this.name);  }}var pig1 = new Pig(‘piga‘,11)var pig2 = new Pig(‘pigb‘,12)pig1.friends.push(‘ff‘)console.log(pig1.friends);console.log(pig2.friends);console.log(pig1.friends === pig2.friends);  // falseconsole.log(pig1.sayName === pig2.sayName);  // true

View Code

 

JS進階程式設計2