js學習筆記二

2021-06-23 05:02:29 字數 4434 閱讀 2640

1.      oop

(1)      esmascript有兩種屬性:資料屬性和訪問器屬性。可以通過:

object.defineproperty() 來修改。

(2)      屬性前面加一下劃線,表示能通過物件方法訪問該屬性。

(3)      按照慣例,建構函式的函式名是以乙個大寫字母開頭。非建構函式則以乙個小寫字母開頭。

2.      工廠模式

function createperson(name, age, job);

return o; //return

}var person1 = createperson("nicholes", 29,"engineer");

3.      建構函式模式

function person(name, age, job);

}var person1 = newperson("nicholes", 29, "engineer"); //此時它是建構函式模式

person("greg", 23, "doctor");

//當作普通函式使用  新增到window 應為this 指向windows

window.sayname();        //"greg"

var o = new object(); //在另乙個物件作用域中呼叫

person.call(o, "kiven", 23,"nursr");

o.sayname();

4.      原型模式

function person(){}

person.prototype.name = "greg";

person.prototype.age = 34;

person.prototype.job = "doctor";

person.prototype.sayname = function();

var person1 = new person();

var person2 = new person();

//所有例項共享這些屬性和方法。

說明:只要建立乙個函式,就會為該函式建立乙個prototype屬性,這個屬性指向函式的原型物件(person prototype),所有的原型物件都會自動獲得乙個constructor屬性,person. prototype.constructor 指向了person

person1. constructor== person

person. prototype.constructor==person

object.getprototypeof(person1)== person.prototype

(2) 雖然可以通過物件例項訪問訪問儲存在原型中的值,但是不能通過物件的例項來改變原型中的屬性(它只是在該物件例項中覆蓋了原型中的屬性,但是屬性的值是可以改變的),不過使用delete可以刪除新定義的這個例項屬性,從而能讓我訪問原型屬性。

(3)hasownproperty()可以檢測乙個屬性是屬於例項屬性(返回true)還是屬於原型屬性,

alert(person1.hasownproperty(「nane」));

(4)in可以單獨使用。

alert(「name」 in person1);  //只要在person1中能訪問到name屬性就返回true

5.      更簡單的原型語法

function person(){}

person.prototype =

};var person1 = new person();

但是此時例項物件的constructor屬性不再指向person

person1. constructor == person  //false

6.      我們可以使用person.prototype.sayhi = function(){}  給原型物件新增屬性,並且所有之前或之後例項化的物件都可使用新增的屬性(應為這些例項只是乙個指標,指向原型),但是如果使用建構函式重寫,那麼建構函式之前的例項,就不能指向新的物件原型。

7.      組合使用建構函式模式和原型模式。(建立自定義型別的最常見方式。)

(1)      建構函式模式用於定義例項屬性,而原型模式用於定義方法和共享屬性。

(2)      包含引用型別值的原型屬性會被所有例項共享,而這也是為什麼要在建構函式中,而不是在原型物件中定義屬性的原因。                 

8.      ecmaseript只支援實現繼承,而且實現繼承主要是依靠原型鏈來實現的。

function super()

super.prototype.getsuper = function();

function sub()

sub.prototype = new super(); //繼承了super 給它替換原型

sub.prototype.getsub = function();

var instance = new sub();

alert(instance.getsuper()); //true

alert(instance.getsub()); //false

alert(instance.property); //true

var instance2 = new super();

alert(instance2.getsub()); //報錯

說明:(1)給原型新增方法的**一定要放在替換原型語句之後。

(2)在通過原型鏈實現繼承時,不能使用物件字面量建立原型的方法,否則會重寫原型鏈。

(3)若被繼承者存在引用型別  則會被繼承者的所有例項共享屬性(問題)

(4)不能向超類建構函式中傳遞引數。

9.      繼承  (借用建構函式 有時也叫偽造物件或者經典繼承  可以解決 原型中包含引用型別值所帶來問題)

function super(name)

function sub()

var instance = new sub();

alert(instance.name); //"greg"

alert(instance.age); //29

說明:為了確保超類的建構函式不會重寫子類的例項屬性,可以在呼叫超類建構函式之後,再新增子類中的例項屬性。

10.  組合繼承——最常用的繼承模式(有時也叫偽經典繼承,是將原型鏈和建構函式技術組合在一起)

使用原型鏈實現對原型屬性和方法的繼承,而通過借用建構函式來實現對例項屬性的繼承。

function super(name)

super.prototype.sayname = function();

function sub(name, age)

//繼承方法

sub.prototype = new super();

sub.prototype.constructor = sub;

sub.prototype.sayage = function();

var instance1 = new sub("greg",24);

instance1.colors.push("yellow");

//將不會被其他例項共享 其他例項還是上面三種顏色

instance1.sayage(); //24

instance1.sayname(); //"greg"

11.   寄生組合式繼承   是引用型別最理想的繼承正規化

function inheritprototype(subtype, supertype)

function super(name)

super.prototype.sayname = function();

function sub(name, age)

inheritprototype(sub, super);

sub.prototype.sayage = function();

var instance1 = new sub("greg",24);

instance1.colors.push("yellow");

//將不會被其他例項共享 其他例項還是上面三種顏色

alert(instance1.colors);

instance1.sayage(); //24

instance1.sayname(); //"greg"

使用這種方式只呼叫一次父類。

JS學習筆記(二)

js中的所有事物都是物件,例如 字串 數值 陣列 函式等,每一種物件都有屬性和方法。屬性 反映該物件某些特定的性質,如字串的長度 影象的長寬等 方法 對物件執行的動作,如提交submit,時間獲取getyear等 訪問物件屬性語法 var array new array 5 len array.le...

JS學習筆記(二)

function addloadevent func else window.onload可以是乙個函式。如果是,這個函式將在頁面載入完成之後被執行。這裡typeof是檢測型別,函式的型別就是 function 這個字串。那麼,如果 typeof window.onload function 也就是...

JS學習筆記二

在html與js中也一樣,萬物皆物件 es6 定義變數的關鍵字 let prto 原型 其實就是繼承 全稱 prototype dom的作用 1.用於操作html元素 2.用於操作css樣式 操作 增刪改查 可以通過給設定的元素加上id 獲取元素或者節點 我來學習dom了,練習通過id獲取元素 va...