高程3總結#第6章面向對象的程序設計

ingood 發布于2019-08-23 11:51 / 751人閱讀

摘要：面向對象的程序設計理解對象屬性類型創建自定義對象的最簡單方式就是創建一個的實例，然后再為它添加屬性和方法對象字面量稱為創建這種對象的首選方式兩種屬性數據屬性，可以讀取和寫入值，有四個描述其行為的特性表示能否通過刪除屬性從而重新定義屬性，能否

面向對象的程序設計 理解對象 屬性類型

創建自定義對象的最簡單方式就是創建一個Object的實例，然后再為它添加屬性和方法

var person=new Object();
person.name="Nicholas";
person.age=20;
person.job="Software Engineer";
person.sayName=function(){
  alert(this.name)
}

對象字面量稱為創建這種對象的首選方式

var person={
  name:"Nicholas",
  age:20,
  job:"Software Engineer",
  sayName:function(){
    alert(this.name);
  }
};

兩種屬性

數據屬性，可以讀取和寫入值，有四個描述其行為的特性

[[Configurable]]表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性，特性默認值為true

[[Enumerable]]表示能否通過for-in循環返回屬性，特性默認值為true

[[Writable]]表示能否修改屬性的值，特性默認值為true

[[Value]]包含這個屬性的數據值，讀取屬性值的時候，從這個位置讀，寫入屬性值的時候，把新值保存在這個位置，特性默認值是undefined

要修改屬性默認的特性，使用Object.definePropery()方法，這個方法接收三個參數：屬性所在的對象、屬性的名字和一個描述符對象。

var person={};
Object.definePropery(person,"name",{
  writable:false,
  value:"Nicholas"
});
alert(person.name);//"Nicholas"
person.name="Greg";
alert(person.name);//"Nicholas"

訪問器屬性，包含一對getter和setter函數。在讀取訪問器屬性的時候，會調用getter函數，這個函數負責返回有效的值。在寫入訪問器屬性的時候，會調用setter函數并傳入新值，這個函數負責決定如何處理數據。

[[Configurable]]表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為數據屬性，特性默認值為true

[[Enumerable]]表示能否通過for-in循環返回屬性，特性默認值為true

[[Get]]在讀取屬性時調用的函數，默認值為undefined

[[Set]]在寫入屬性時調用的函數，默認值為undefined

訪問器屬性不能直接定義，必須使用Object.defineProperty()來定義

定義多個屬性

Object.defineProperties()方法可以通過描述符一次定義多個屬性，這個方法接收兩個對象參數，一個對象是要添加和修改其屬性的對象，第二個對象的屬性與第一個對象中要添加或修改的屬性一一對應

var book = {};
Object.defineProperties(book, {
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if (newValue > 2004) {
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  }
});

讀取屬性的特性

Object.getOwnPropertyDescription()方法，可以取得給定屬性的描述符，這個方法接收兩個參數，屬性所在的對象和要讀取其描述符的屬性名稱

var book = {};
Object.defineProperties(book, {
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if (newValue > 2004) {
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  }
});
var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value); //2004
alert(descriptor.configurable); //false
alert(typeof descriptor.get); //"undefined"
var descriptor = Object.getOwnPropertyDescriptor(book, "year");
alert(descriptor.value); //undefined
alert(descriptor.enumerable); //false
alert(typeof descriptor.get); //"function"

創建對象 工廠模式

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
  alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

構造函數模式

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
  alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

只要通過new操作符來調用，那它就可以作為構造函數

// 當作構造函數使用
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
// 作為普通函數調用
Person("Greg", 27, "Doctor"); // 添加到 window
window.sayName(); //"Greg"
// 在另一個對象的作用域中調用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName(); //"Kristen"

原型模式

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

無論什么時候，只要創建了一個新函數，就會根據一組特定的規則為該函數創建一個prototype屬性，這個屬性指向函數的原型對象，默認情況下，所有的原型對象都會自動獲得一個constructor屬性，這個屬性包含一個指向prototype屬性所在函數的指針。

組合使用構造函數模式和原型模式

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
  alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

動態原型模式

function Person(name, age, job){
//屬性
this.name = name;
this.age = age;
this.job = job;
// 方法
if (typeof this.sayName != "function"){
  Person.prototype.sayName = function(){
    alert(this.name);
  };
}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

寄生構造函數模式

function Person(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
  alert(this.name);
};
return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

穩妥構造函數模式

function Person(name, age, job){
//創建要返回的對象
var o = new Object();
//可以在這里定義私有變量和函數
//添加方法
o.sayName = function(){
  alert(name);
};
//返回對象
return o;
}

繼承 原型鏈

可以通過兩種方式來確定原型和實例之間的關系，第一種方式是使用instanceof操作符，只要這個操作符來測試實例與原型鏈中出現過的構造函數，結果就會返回true

alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true

第二種方式是使用isPrototypeOf()方法，只要是原型鏈中出現過的原型，都可以說是原型鏈所派生的實例的原型，因此isPrototypeOf()方法也會返回true

alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance)); //true

借用構造函數

function SuperType(){
this.colors = ["red", "blue", "green"];
}
function SubType(){
// 繼承了 SuperType
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

對于原型鏈而言，借用構造函數有一個很大的優勢，即可以在子類型構造函數中向超類型構造函數傳遞參數

function SuperType(name){
  this.name = name;
}
function SubType(){
  //繼承了 SuperType，同時還傳遞了參數
  SuperType.call(this, "Nicholas");
  //實例屬性
  this.age = 29;
}
var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //29

組合繼承

指的是將原型鏈和借用構造函數的技術組合到一塊

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};
function SubType(name, age){
  //繼承屬性
  SuperType.call(this, name);
  this.age = age;
}
//繼承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

原型式繼承

var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

寄生式繼承

思路和構造函數和工廠模式類似，即創建一個僅用于封裝繼承過程的函數，函數在內部以某種方式來增強對象

function createAnother(original){
  var clone = object(original); //通過調用函數創建一個新對象
  clone.sayHi = function(){ //以某種方式來增強這個對象
    alert("hi");
  };
  return clone; //返回這個對象
}
var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

寄生組合式繼承

無論什么情況下都會調用兩次超類型構造函數，一次是在創建子類型原型的時候，另一次實在子類型構造函數內部

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};
function SubType(name, age){
  SuperType.call(this, name); // 第二次調用 SuperType()
  this.age = age;
}
SubType.prototype = new SuperType(); // 第一次調用 SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
  alert(this.age);
};

云服務器 GPU云服務器面向對象設計模式 java 設計面向對象明解c語言第9章 php的面向對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97568.html

高程3總結#第8章BOM

摘要：對象的核心對象是，它表示瀏覽器的一個實例。而和則表示該容器中頁面視圖區的大小。在中，與返回相同的值，即視口大小而非瀏覽器窗口大小。第三個參數是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性。這應該是用戶打開窗口后的第一個頁面 BOM window對象 BOM的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它既是通過JavaScript訪...

MASAILA 2019-08-23 11:57 評論0 收藏0
高程3總結#第17章錯誤處理與調試

錯誤處理與調試錯誤處理 try-catch語句 try{ //可能會導致錯誤的代碼 }catch(error){ //在錯誤發生時怎么處理 } 發生錯誤時可以顯示瀏覽器給出的信息 try{ window.someNonexistentFunction(); }catch(error){ alert(error.message); } 在try-catch語句中是可選的，但...

fizz 2019-08-23 12:08 評論0 收藏0
高程3總結#第16章HTML5腳本編程

摘要：腳本編程跨文檔消息傳遞跨文檔消息傳送，簡稱為，指的是來自不同域的頁面間傳遞消息的核心是方法，在規范中，除了部分之外的其他部分也會提到這個方法名，但都是為了同一個目的，向另一個地方傳遞參數。第一個頁面加載時為空 HTML5腳本編程跨文檔消息傳遞跨文檔消息傳送，簡稱為XMD，指的是來自不同域的頁面間傳遞消息 XMD的核心是postMessage()方法，在HTML5規范中，除了XDM...

silvertheo 2019-08-23 12:07 評論0 收藏0
高程3總結#第1章JavaScript簡介

摘要：簡介簡史誕生于年，當時主要負責表單的輸入驗證。實現一個完整的由三部分組成核心文檔對象模型瀏覽器對象模型就是對實現該標準規定的各個方面內容的語言的描述。把整個頁面映射為一個多層節點結構。由萬維網聯盟規劃。主要目標是映射文檔的結構。 JavaScript簡介 JavaScript簡史 JavaScript誕生于1995年，當時主要負責表單的輸入驗證。如果沒有表單驗證的功能，填入信息之...

betacat 2019-08-23 11:43 評論0 收藏0
高程3總結#第20章JSON

摘要：語法語法可以表示三種類型的值簡單值使用與相同的語法，可以在中表示字符串數值布爾值和。對象對象作為一種復雜數據類型，表示的是一組無序的鍵值對兒。如果字符串長度超過了個，結果中將只出現前個字符。 JSON 語法 JSON語法可以表示三種類型的值簡單值：使用與 JavaScript 相同的語法，可以在 JSON 中表示字符串、數值、布爾值和 null 。但 JSON 不支持 JavaS...

Hwg 2019-08-23 12:11 評論0 收藏0