JavaScript面向對象學習(part2)——筆記整理→香菇

文章目錄
一.構造函數和原型
   1.對象的創建方式
   1.2靜態成員和實例成員
      1.2.1實例成員
      1.2.2靜態成員
   1.3構造函數的問題
   1.4構造函數原型prototype
   1.5對象原型
   1.6constructor構造函數
   1.7原型鏈
   1.8構造函數實例和原型對象三角關係
   1.9原型鏈和成員的查找機制
二.繼承
   2.1call()
三.ES5新增方法
   3.1數組方法forEach遍歷數組
   3.2數組方法filter過濾數組
   3.3數組方法some
   3.4some和forEach區別
   3.5trim方法去除字符串兩端的空格
   3.6獲取對象的屬性名
   3.7Object.defineProperty

一.構造函數和原型

1.對象的創建方式

字面量方式
```
var obj = {};
```
new關鍵字
```
var obj = new Object();
```

構造函數方式

function Person(name,age){
  this.name = name;
  this.age = age;
}
var obj = new Person('zs',12);

1.2靜態成員和實例成員

1.2.1實例成員

==實例成員就是構造函數內部通過this添加的成員 ==如下列代碼中uname ,sing 就是實例成員,實例成員只能通過實例化的對象來訪問

 function Star(uname, age) {
     this.uname = uname;
     this.sing = function() {
     console.log('我會唱歌');
    }
}
var h = new Star('易烊千璽');
console.log(h.uname);//實例成員只能通過實例化的對象來訪問

1.2.2靜態成員

靜態成員在構造函數本身上添加的成員如下列代碼中 sex 就是靜態成員,靜態成員只能通過構造函數來訪問

 function Star(uname, age) {
     this.uname = uname;
     this.sing = function() {
     console.log('我會唱歌');
    }
}
Star.sex = '男';
var h = new Star('易烊千璽');
console.log(Star.sex);//靜態成員只能通過構造函數來訪問

1.3 構造函數的問題

同一個構造函數，開闢倆不同的內存空間，有可能就一個方法不一樣。構造函數方法很好用，但是存在浪費內存的問題。

爲了解決這問題：

1.4 構造函數原型prototype

1.5 對象原型

對象都會有一個屬性 __proto__ 指向構造函數的 prototype 原型對象，之所以我們對象可以使用構造函數 prototype 原型對象的屬性和方法，就是因爲對象有 __proto__ 原型的存在。
__proto__對象原型和原型對象 prototype 是等價的
__proto__對象原型的意義就在於爲對象的查找機制提供一個方向，或者說一條路線，但是它是一個非標準屬性，因此實際開發中，不可以使用這個屬性，它只是內部指向原型對象 prototype

1.6 constructor構造函數

對象原型（ __proto__）和構造函數（prototype）原型對象裏面都有一個屬性 constructor 屬性 ，constructor 我們稱爲構造函數，因爲它指回構造函數本身。
constructor 主要用於記錄該對象引用於哪個構造函數，它可以讓原型對象重新指向原來的構造函數。
一般情況下，對象的方法都在構造函數的原型對象中設置。如果有多個對象的方法，我們可以給原型對象採取對象形式賦值，但是這樣就會覆蓋構造函數原型對象原來的內容，這樣修改後的原型對象 constructor  就不再指向當前構造函數了。此時，我們可以在修改後的原型對象中，添加一個 constructor 指向原來的構造函數。

注：
如果我們修改了原來的原型對象,給原型對象賦值的是一個對象,則必須手動的利用constructor指回

1.7 原型鏈

每一個實例對象又有一個__proto__屬性，指向的構造函數的原型對象，構造函數的原型對象也是一個對象，也有__proto__屬性，這樣一層一層往上找就形成了原型鏈。

1.8 構造函數實例和原型對象三角關係

1.構造函數的prototype屬性指向了構造函數原型對象
2.實例對象是由構造函數創建的,實例對象的__proto__屬性指向了構造函數的原型對象
3.構造函數的原型對象的constructor屬性指向了構造函數,實例對象的原型的constructor屬性也指向了構造函數

1.9 原型鏈和成員的查找機制

任何對象都有原型對象,也就是prototype屬性,任何原型對象也是一個對象,該對象就有__proto__屬性,這樣一層一層往上找,就形成了一條鏈,我們稱此爲原型鏈;

當訪問一個對象的屬性（包括方法）時，首先查找這個對象自身有沒有該屬性。
如果沒有就查找它的原型（也就是 __proto__指向的 prototype 原型對象）。
如果還沒有就查找原型對象的原型（Object的原型對象）。
依此類推一直找到 Object 爲止（null）。
__proto__對象原型的意義就在於爲對象成員查找機制提供一個方向，或者說一條路線。

二.繼承

2.1 call()

call()可以調用函數
call()可以修改this的指向,使用call()的時候
參數1是修改後的this指向,參數2,參數3…使用逗號隔開連接

 function fn(x, y) {
     console.log(this);
     console.log(x + y);
}
  var o = {
  	name: 'miqi'
  };
  fn.call(o, 1, 2);//調用了函數此時的this指向了對象o,

三.ES5新增方法

3.1 數組方法forEach遍歷數組

 arr.forEach(function(value, index, array) {
       //參數一是:數組元素
       //參數二是:數組元素的索引
       //參數三是:當前的數組
 })
  //相當於數組遍歷的 for循環 沒有返回值

3.2 數組方法filter過濾數組

  var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
  	 //參數一是:數組元素
     //參數二是:數組元素的索引
     //參數三是:當前的數組
     return value >= 20;
  });
  console.log(newArr);//[66,88] //返回值是一個新數組

3.3 數組方法some

some 查找數組中是否有滿足條件的元素 
 var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
    //參數一是:數組元素
     //參數二是:數組元素的索引
     //參數三是:當前的數組
     return value < 3;
  });
console.log(flag);//false返回值是布爾值,只要查找到滿足條件的一個元素就立馬終止循環

3.4 some和forEach區別

如果查詢數組中唯一的元素, 用some方法更合適,在some 裏面遇到 return true 就是終止遍歷迭代效率更高
在forEach 裏面 return 不會終止迭代

3.5 trim方法去除字符串兩端的空格

var str = '   hello   '
console.log(str.trim()）  //hello 去除兩端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除兩端空格

3.6 獲取對象的屬性名

Object.keys(對象) 獲取到當前對象中的屬性名，返回值是一個數組

 var obj = {
     id: 1,
     pname: '小米',
     price: 1999,
     num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]

3.7 Object.defineProperty

Object.defineProperty設置或修改對象中的屬性

Object.defineProperty(對象，修改或新增的屬性名，{
		value:修改或新增的屬性的值,
		writable:true/false,//如果值爲false 不允許修改這個屬性值
		enumerable: false,//enumerable 如果值爲false 則不允許遍歷
        configurable: false  //configurable 如果爲false 則不允許刪除這個屬性 屬性是否可以被刪除或是否可以再次修改特性
})

這次課件內容好雜好多好tired
入門到放棄→不久了