JS筆記(6):建構函式
摘要:
new Fn;
new Fn();
new Array();
new Function();
new Object();
new RegExp();
建構函式的返回值:當前類的例項
基於建構函式創建出來的值是引用型別(可以但不建議用建構...
- new Fn;
- new Fn();
- new Array();
- new Function();
- new Object();
- new RegExp();
- 建構函式的返回值:當前類的例項 基於建構函式創建出來的值是引用型別(可以但不建議用建構函式模式建立基本型別值)
二、關於建構函式的this:
建構函式的this是當前類的例項
三、關於建構函式的renturn:
- 1.return; //=>return後面不加內容,代表結束執行下面的程式碼
- 2.return "123"; //=> return後面是基本型別,則返回的仍是當前類的例項(即this)
- 3.return {name:'Tom'}; //=> return後面是引用型別,則返回的是引用型別值(即覆蓋了例項)
四、關於建構函式執行的過程:
-
1.像普通函式執行一樣,形成一個私有作用域(棧記憶體)
- 形參賦值(私有變數)
- 變數提升(私有變數)
- 2.【建構函式執行獨有】在js程式碼自上而下執行之前,首先在當前形成的私有棧中建立一個物件(建立一個堆記憶體:暫時不儲存任何的東西),並且讓函式中的執行主體(this)指向這個新的堆記憶體(當前類的例項) => this === 建立的物件
- 3.程式碼自上而下執行
- 4.【建構函式執行獨有】程式碼執行完成,把之前建立的對記憶體地址返回(瀏覽器預設返回)
- 5.釋放棧記憶體
function Fn() { let n = '彭彭' this.name = '黃老闆'; this.m = n; // return {name:'Tom'}; }; Fn.prototype.a = function () { console.log('123'); }; let f = new Fn(); console.log(f); // Fn {name: "黃老闆", m: "彭彭"} console.log(f.n); // undefined 複製程式碼
此例中:
- f => Fn類的一個例項,同時是個物件(也是建構函式的返回值,是建構函式中的this)
- new Fn() => 同f 即例項化物件
- Fn => f 例項所屬類,同時是個建構函式
// instanceof:檢測當前例項是否所屬這個類 console.log(f instanceof Fn); //true console.log(f instanceof Object); //true console.log(f instanceof Function); //flase f是例項,例項是個物件 屬於Object類,不屬於Function console.log(Fn instanceof Function); //true 所有的函式都屬於Function內建類的例項 console.log(Fn instanceof Object); //true 函式也是物件,所以屬於內建基類Object // in: 判斷物件中是否存在某個元素(無論私有屬性還是在原型上的公有屬性,只要存在就為true console.log('n' in f); // flase 'n'不屬於f例項的屬性,是Fn函式的屬性 console.log('m' in f); // true console.log('name' in f); // true console.log('a' in f); //true // hasOwnProperty: 檢測當前屬性為物件的私有屬性 console.log(f.hasOwnProperty('n')); //false n不是私有屬性,也不是公有屬性,n不是f例項的屬性 console.log(f.hasOwnProperty('m')); //true console.log(f.hasOwnProperty('a')); //flase a是Fn類原型上的屬性,屬於公有屬性 複製程式碼
編寫一個方法:檢測當前屬性是否為物件的公有屬性
function hasPubProperty(attr,obj){ return (attr in obj) && (obj.hasOwnProperty(attr) === false) //attr: 屬性 obj: 物件 //屬性在物件裡,並且不是私有屬性 =>即為公有屬性 }; console.log(hasPubProperty('toString',f)); //true 複製程式碼
執行題練習:
function Fn(name,age) { var n = 10; this.name = name; this.age = age + n; }; Fn(); var f1 = new Fn('xxx',20); var f2 = new Fn('aaa',30); console.log(f1 === f2); //false 兩個不同的例項(堆記憶體地址) console.log(f1.age); //30 console.log(f2.name); // 'aaa' console.log('name' in f1); // true // name 和age在兩個不同的例項都有儲存,但是都是每個例項自己私有的屬性 console.log(f1.n); // undefined 只有this.xxx = xxx的才和例項有關係,n是私有作用域中的一個私有變數而已 複製程式碼