面向對象以及相關知識

1.什麼是對象?

(1)只要是對象就可以有自己的私有屬性。

例如:

let obj = new Object();  obj.name = 'lee'; 我們這裏obj這個對象有自己的私有屬性,私有屬性就是name

let str = 'abc'; str.name = 'efg'; console.log(str.name); // undefined 因爲str是字符串不是對象 所以沒有自己的私有屬性

let strObj = new String('abc');strObj.name = 'efg'; console.log(strObj.name); // efg strObj是new出來的 是對象 所以有自己的私有屬性

(2)只要是new 出來的都是對象。

例如:new Array()、new Object()、new Number()、new String()、function Leo() {}; new Leo();

(3)不同對象肯定不會相等的。

例如:

let first  = {};

let second = {};

first  == second // false

同理:

let arrOne = [];

let arrTwo = [];

arrOne == arrTwo; // false

分割線~~~~

 let one = new Number(1);

let two = new Number(1);

one == two; // false

分割線~~~~

如果想讓他們相等

let one = new Array(1);

let two = one;

one == two; // true

如果one.push(2); two裏也會有2 反之 如果two.push(3); one數組裏也有3 這是因爲對象的引用機制 是它們指向了相同的內存空間

(4)對象都會有引用機制。如果不想引用就重新賦值

例如:

let obj = {name: 'lee'};

let another = obj;

obj = {name: 'Alice'};

obj == another; // false 這裏obj的name是Alice, another的name是lee

2.程序員主動回收:

(1)賦值爲null  (2)delete刪除屬性

let num = 123;

num = null; // num被回收掉

console.log(num); // null

let obj = {age: 24};

如果想刪除掉obj的age屬性值 使用delete

delete obj.age;(delete只用於刪除對象的屬性,不可以刪除對象本身
例如不可以delete obj 這樣執行完之後,obj以及它上面的屬性還是存在)

console.log(obj); // {}

我們這裏嘗試清除js定義好的類

String = null;

let str = new String('abc'); // Uncaught TypeError: String is not a constructor

Number = Boolean = Object = null;

let num = new Number(12); //  Uncaught TypeError: Number is not a constructor
依次類推,new Boolean、Object都會報相應錯誤

window會例外

window = null;
console.log(window); // window對象

3.javascript數據類型:undefined、null、Boolean、String、Number、Object、Symbol(共7種)

基本數據類型: undefined、null、Boolean、String、Number(5種)

4.this指向

(1)在普通函數下 this 指向的是window。

例:

function sum() {

console.log(this); // window

};

sum(); 

(2)有事件源指向事件源本身。

例:

document.onclick = function() {

console.log(this); // 觸發點擊事件,this指向document

}

(3)在定時器下this指向window,除了es6。 es6中箭頭函數this指向父級

例:

let obj = {calc: function() {setTimeout(function() {console.log(this)}, 0)}};

obj.calc(); // window

let another = {calc: function() {setTimeout(() => {console.log(this)}, 0)}};

another.calc(); // another對象本身輸出 {calc:f}

(4)在對象下this指向的是對象本身。

let obj = {

calc: function() {console.log(this.age)},

age: 24

};

obj.calc(); // 24

5.面向對象

地球上有生物,生物又分爲人類、植物類、微生物類等等 人類具備的技能:洗衣、做飯、伐木等

瀏覽器-Object又分爲string、boolean、number等 string具備的方法:substring、indexOf、slice等

這裏的類指的就是string、boolean、number等

原型:類string、boolean、number等的prototype 例如string的substring就是在原型上的

原型鏈: 繼承 例如:Object上的toString方法其下面的string、boolean、number等類都有 也就是說string、boolean、number等類可以繼承Object,但是Object不可以繼承他們下面的string、boolean、number等類。

除了這些js本身提供的類之外,我們也可以自定義類,自定義的類也可以繼承。

自定義類

例:

function Loader() {

    this.value = 'abc'

};

Loader.prototype.name = 'loaders';

function Sum() {

}

Sum.prototype = new Loader(); //(這裏sum的原型上繼承了Loader)

console.log(new Sum().value); // 輸出abc

console.log(new Sum().name); // 輸出loaders

分割線~~~~

這裏建議寫法: Sum.prototype = new Loader(); //原型和屬性都被繼承 並且互相不會影響。例如 Sum.prototype.age = 24;Loader.prototype上不會新增age屬性。完全沒受到影響。反之,如果Loader上新增了一個屬性,則會被Sum繼承。例:Loader.prototype.sex = '男';console.log(Sum.prototype.sex); // 男

不建議寫法:Sum.prototype = Loader.prototype; // 如果這樣寫給Sum原型鏈上加上一個屬性並且賦值,Loader的原型鏈上也會有,這是因爲對象的引用機制。Sum.prototype.age = 24;console.log(Loader.prototype.age); // 24 反之,Loader.prototype.sex = '男';console.log(Sum.prototype.age); // 男。這種寫法下console.log(new Sum().name); // loaders console.log(new Sum().value); // undefined

繼承方法:call、apply

call:改變this指向,並且調用一次這個函數,從第二個參數開始對應調用函數的形參

apply: 改變this指向,第二個參數是個對象數組,數組的參數對應調用函數形參

例:

function Loader(year,month) {

    this.value = 'abc';

    console.log(`今年是${year}年${month}月`);

};

Loader.prototype.name = 'loaders';

function Sum() {

    Loader.call(this, 2019, 05); // 改變Loader的this指針 使其指向Sum 輸出今年是2019年5月

}

console.log(new Sum().value); // abc

console.log(new Sum().name); // undefined

function Add() {

    Loader.apply(this,[2019, 05]); // 改變Loader的this指針 使其指向Sum 輸出今年是2019年5月

}

console.log(new Add().value); // abc

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章