一昧辽、構(gòu)造函數(shù)和原型

1.靜態(tài)成員和實(shí)例成員（成員就是屬性和方法）

（1）實(shí)例成員就是構(gòu)造函數(shù)內(nèi)部通過(guò)this添加的成員 。實(shí)例成員只能通過(guò)實(shí)例化的對(duì)象來(lái)訪問(wèn)
（2）靜態(tài)成員 在構(gòu)造函數(shù)本身上添加的成員 卑雁。靜態(tài)成員只能通過(guò)構(gòu)造函數(shù)來(lái)訪問(wèn)

 function Star(uname, age) {
     this.uname = uname;  //實(shí)例成員
     this.age = age;  //實(shí)例成員
     this.sing = function() {  //實(shí)例成員
     console.log('我會(huì)唱歌');
    }
}
Star.sex = '男';  //靜態(tài)成員
var ldh = new Star('劉德華', 18);
console.log(Star.sex);//靜態(tài)成員只能通過(guò)構(gòu)造函數(shù)來(lái)訪問(wèn)

2.構(gòu)造函數(shù)原型prototype

（1）每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype 屬性跌榔，prototype是一個(gè)對(duì)象地熄。
（2）一般情況下叉讥，我們把構(gòu)造函數(shù)的公共方法放到原型對(duì)象prototype里面窘行，實(shí)現(xiàn)方法共享。

function Star(uname, age) {
          this.uname = uname;
          this.age = age;
        }

        // 構(gòu)造函數(shù)的公共方法寫(xiě)到原型對(duì)象里面
        Star.prototype.sing = function (song) {
          console.log(this.uname + '會(huì)唱' + song);
        };
        var WuLei = new Star('吳磊',22);
        WuLei.sing('苦樂(lè)年華');

3._proto_對(duì)象原型

（1）每個(gè)實(shí)例對(duì)象中都有一個(gè)_proto_屬性图仓，它指向構(gòu)造函數(shù)中的原型對(duì)象prototype罐盔。
（2）_proto_對(duì)象原型和原型對(duì)象 prototype 是等價(jià)的。也是對(duì)象
（3）實(shí)例對(duì)象調(diào)用方法時(shí)救崔，先去查找本身是否有該方法翘骂；再去prototype原型對(duì)象中查找。

4.constructor屬性

（1）對(duì)象原型（ __ proto__）和構(gòu)造函數(shù)的原型對(duì)象（prototype）里面都有一個(gè)屬性 constructor 屬性 帚豪，constructor 我們稱為構(gòu)造函數(shù)，它指回構(gòu)造函數(shù)本身草丧。
（2）如果給prototype原型對(duì)象賦值為一個(gè)對(duì)象類型的數(shù)據(jù),會(huì)覆蓋原本的對(duì)象狸臣，則必須手動(dòng)地把constructor指回原來(lái)的構(gòu)造函數(shù)。

     function Star(uname, age) {
          this.uname = uname;
          this.age = age;
        }
        // 對(duì)象原型（ __proto__）和構(gòu)造函數(shù)的原型對(duì)象（prototype）里面都有一個(gè)屬
        // 性 constructor 屬性 昌执，constructor 我們稱為構(gòu)造函數(shù)烛亦，因?yàn)樗富貥?gòu)造函數(shù)本身。
        Star.prototype = {
          constructor: Star, //在原型對(duì)象中手動(dòng)將constructor屬性指向構(gòu)造函數(shù)
          sing: function () {
            console.log('我會(huì)唱歌');
          },
          film: function () {
            console.log('我會(huì)演電影');
          },
        };
        var star = new Star('吳磊', 22);

5.實(shí)例對(duì)象原型（ _proto_）懂拾、構(gòu)造函數(shù)（prototype）原型對(duì)象煤禽、constructor屬性

（1）構(gòu)造函數(shù)通過(guò)prototype指向子屬性原型對(duì)象prototype。
（2）原型對(duì)象prototype通過(guò)子屬性constructor指向構(gòu)造函數(shù)岖赋。
（3）實(shí)例對(duì)象通過(guò)_proto_對(duì)象原型與構(gòu)造函數(shù)的原型對(duì)象prototype等價(jià)檬果。

6.原型鏈

構(gòu)造函數(shù)（prototype）原型對(duì)象也是一個(gè)對(duì)象，也有對(duì)象原型（_proto_）唐断，它指向Object的原型對(duì)象(prototype)选脊。

原型鏈.PNG

7.實(shí)例對(duì)象調(diào)用屬性和方法時(shí)的查找機(jī)制

（1）首先查找這個(gè)對(duì)象自身有沒(méi)有該屬性。
（2）如果沒(méi)有就查找它的原型對(duì)象 （也就是 __ proto__指向的 prototype 原型對(duì)象）脸甘。
（3）如果還沒(méi)有恳啥，就查找原型對(duì)象的對(duì)象原型（指向的是Object的原型對(duì)象）。
（4）_proto_對(duì)象原型的意義就在于為對(duì)象成員查找機(jī)制提供一個(gè)方向丹诀，或者說(shuō)一條路線钝的。

8.this指向

構(gòu)造函數(shù)中的this和原型對(duì)象的this,都指向我們new出來(lái)的實(shí)例對(duì)象翁垂。

9.利用prototype原型對(duì)象擴(kuò)展內(nèi)置對(duì)象方法

（1）構(gòu)造函數(shù).prototype.新方法( ) = function( ){ }
　　這是給原型對(duì)象追加新方法。
（2）構(gòu)造函數(shù).prototype = { 新方法1 ： function( ) { } 硝桩，新方法2 ： function( ) { } }
　　這種形式會(huì)覆蓋原型對(duì)象prototype原本的內(nèi)容沿猜。禁止用這種形式擴(kuò)展內(nèi)置對(duì)象方法。

        // 為數(shù)組添加自定義方法
        Array.prototype.sum = function () {
          var sum = 0;
          for (var i = 0; i < this.length; i++) {
            sum += this[i];
          }
          return sum;
        };

        //實(shí)例化數(shù)組對(duì)象
        var arr = new Array(11,22,33);
        console.log(arr.sum());
      });

10.call( )方法

方法名.call (this的指向, 參數(shù)1亿柑，參數(shù)2）

call( )方法可以調(diào)用函數(shù)邢疙；改變函數(shù)的this指向。

      function fn(x, y) {
          console.log(x + y);
          console.log(this);
        }

        var o = {};

        fn.call(o,1,2);//調(diào)用函數(shù)望薄，并將fn函數(shù)的this指向改為對(duì)象o

11.子構(gòu)造函數(shù)繼承父構(gòu)造函數(shù)

核心：（1）在子構(gòu)造函數(shù)里調(diào)用父構(gòu)造函數(shù)疟游；把父構(gòu)造函數(shù)的this指向修改為子構(gòu)造函數(shù)。
　　『壑А（2）把父構(gòu)造函數(shù)的實(shí)例化對(duì)象賦值給子原型對(duì)象颁虐。
　　　（3）用對(duì)象賦值的方法會(huì)覆蓋子原型對(duì)象的內(nèi)容卧须，要手動(dòng)把子原型對(duì)象的constructor屬性指回子構(gòu)造函數(shù)另绩。

           function Father(uname,age){
                this.uname = uname;
                this.age = age;
            }

            function Son(u_uname,a_age,weight){
                Father.call(this,u_uname,a_age);//1.子構(gòu)造函數(shù)調(diào)用父構(gòu)造函數(shù)
                this.weight = weight;
            }

            Son.prototype = new Father();//2.將父構(gòu)造函數(shù)的實(shí)例對(duì)象賦值給子原型對(duì)象
            Son.prototype.constructor = Son;//3.將子原型對(duì)象的constructor屬性指回子構(gòu)造函數(shù)

            // 實(shí)例化子構(gòu)造函數(shù)
            var son = new Son('吳磊',22,'60kg')
            console.log(son);

12.類class的本質(zhì)是構(gòu)造函數(shù)。

二花嘶、ES5新增的方法

forEach笋籽、filter、some方法的后面兩個(gè)參數(shù)可以省略椭员，只寫(xiě)一個(gè)參數(shù)就代表每個(gè)數(shù)組元素车海。

1.數(shù)組方法forEach( )遍歷數(shù)組（對(duì)象也有）

數(shù)組名.forEach( function(item, index , array ) { } )
item：每一個(gè)數(shù)組元素
index：每一個(gè)數(shù)組元素的索引號(hào)
array：數(shù)組對(duì)象本身

var arr = [0, 1, 2];
      arr.forEach(function (item, index, array) {
        console.log('每一個(gè)數(shù)組元素' + item);
        console.log('每一個(gè)元素的索引號(hào)' + index);
        console.log('數(shù)組對(duì)象本身' + array);
      });

2.數(shù)組方法filter( )篩選數(shù)組元素

var 新數(shù)組名 = 數(shù)組名.filter( function( item, index , array ) { } )
item：每一個(gè)數(shù)組元素
index：每一個(gè)數(shù)組元素的索引號(hào)
array：原數(shù)組對(duì)象本身

注意：filter( )方法會(huì)遍歷原數(shù)組，并把所有符合要求的元素篩選出來(lái),一定要加return隘击，返回值是一個(gè)新數(shù)組侍芝。

        var arr = [10,22,35,40];
        var newArr = arr.filter(function(item,index,array){
            return item% 2 == 0;//返回偶數(shù)裝到新數(shù)組中
        })
        console.log(newArr);

3.數(shù)組方法some( )查找是否有滿足條件的數(shù)組元素

var flag = 數(shù)組名.some( function( item, index , array ) { } )
item：每一個(gè)數(shù)組元素
index：每一個(gè)數(shù)組元素的索引號(hào)
array：原數(shù)組對(duì)象本身

注意：（1）some( )方法會(huì)遍歷數(shù)組，判斷是否有元素滿足要求埋同，返回值是布爾值州叠。
　　　（2）some( )方法查找到第一個(gè)滿足要求的元素后凶赁，立即停止循環(huán)遍歷咧栗。
　　　（3）return true可以停止some( )方法的循環(huán)哟冬。另外兩個(gè)方法不行楼熄。
　　　（4）注意return true 的位置浩峡，寫(xiě)到 if 判斷語(yǔ)句中可岂。

      var arr = [12, 45, 2, 67];
      var flag = arr.some(function (item, index, array) {
        if(item>= 100)
        return true;//判斷是否有滿足要求的條件
      });
      console.log(flag);

實(shí)際應(yīng)用：查詢并操作數(shù)組中的唯一元素時(shí)，用some()效率更高翰灾。

          var arr = [];
          data.some(function (value) {
            if (product.value === value.pname) {
              arr.push(value);
              return true;
            }
          }

4.字符串方法trim( )去除字符串兩側(cè)空格

字符串.trim( )

注意：trim( )方法可以去除字符串兩側(cè)的空格缕粹，但不會(huì)對(duì)字符串中間的空格有影響稚茅。返回值是一個(gè)新字符串。

5.獲取對(duì)象的屬性名

var arr = Object.keys(對(duì)象名)
注意：返回值是一個(gè)數(shù)組平斩，里面是對(duì)象的屬性名集合亚享。

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

6.修改與設(shè)置對(duì)象的屬性

Object.defineProperty( 要修改的對(duì)象绘面，要修改或新增的屬性欺税，｛｝)

• 三個(gè)參數(shù)都是必須屬性，第三個(gè)參數(shù)是對(duì)象揭璃，屬性如下：
  （1）value:修改或新增的屬性的值
  （2）writable：true / false晚凿。默認(rèn)值為false ，不允許修改這個(gè)屬性值瘦馍。
  （3）enumerable：true / false歼秽。 默認(rèn)值為false ，不允許遍歷這個(gè)屬性情组。
  （4）configurable: true / false燥筷。 默認(rèn)值為false，不允許刪除這個(gè)屬性院崇。并且configurable的值不能二次修改肆氓。

      var WuLei = {
          uname: '吳磊',
          age: 22,
          height: 183,
        };

        // 添加屬性
        Object.defineProperty(WuLei, 'hobby', {
          value: '擼鐵',
          writeable: false,
          enumerable: false,
          configurable: false
        });

        // writeable設(shè)置為false,則不允許再修改hobby的value值
        WuLei.hobby = '擼串'
        console.log( WuLei.hobby);

        //enumerable設(shè)置為false，獲取WuLei的屬性名集合時(shí)底瓣，就沒(méi)有hobby
        var arr = Object.keys(WuLei);
        console.log(arr);

        // configurable設(shè)置為false,不允許刪除hobby屬性
        delete WuLei.hobby;
        console.log(WuLei);

7. map 函數(shù)

var newArr = arr.map(function(item,value,arr){ })

（1）map方法會(huì)遍歷數(shù)組做院，每個(gè)數(shù)組元素都會(huì)執(zhí)行回調(diào)函數(shù)。
（2）map方法的回調(diào)函數(shù)中濒持，必須有 return，返回的數(shù)據(jù)被 存入新數(shù)組中寺滚。
（3）map方法返回值是一個(gè) 新數(shù)組柑营，不會(huì)改變?cè)瓉?lái)數(shù)組。

8. filter和map的區(qū)別

let arr=[2,4,1,5,3,1];

let res1=arr.map(function (item,index,array) {
  // return array[index]; //用這種方法也可以獲取到當(dāng)前處理的元素
  return item>1;
});

let res2=arr.filter(function (item,index,array) {
  return item>1;
});
console.log(res1,res2);//[ true, true, false, true, true, false ] [ 2, 4, 5, 3 ]

map的結(jié)果只是對(duì)當(dāng)前元素調(diào)用函數(shù)后（x是否大于1）的結(jié)果村视。而filter 會(huì)將結(jié)果為true的數(shù)組存到新的數(shù)組里面官套。

三、補(bǔ)充

1.for... in

for (index in 數(shù)組/對(duì)象)

for...in 語(yǔ)句用于對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行循環(huán)操作蚁孔。

for ... in 循環(huán)中的代碼每執(zhí)行一次奶赔，就會(huì)對(duì)數(shù)組的元素或者對(duì)象的屬性進(jìn)行一次操作。

var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}

2.for ... of

for( const value of 被遍歷的數(shù)據(jù))

①for...of 語(yǔ)句用于循環(huán)遍歷杠氢。
②在 ES6 中引入的 for...of 循環(huán)站刑，以替代 for...in 和 forEach() ，并支持新的迭代協(xié)議鼻百。
③for...of 允許遍歷 Arrays（數(shù)組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數(shù)據(jù)結(jié)構(gòu)等绞旅。
④不能遍歷對(duì)象Object摆尝。

function args() {
  for (const arg of arguments) {
    console.log(arg);
  }
}
 
args('a', 'b', 'c');
// Output:
// a
// b
// c

const arr = ['mini', 'mani', 'mo'];
for (const value of arr) {
  console.log(value);
}
 
// Output:
// mini
// mani
// mo

小結(jié)

（1）構(gòu)造函數(shù)有原型對(duì)象prototype
（2）原型對(duì)象prototype有constructor屬性，指向構(gòu)造函數(shù)
（3）構(gòu)造函數(shù)可以通過(guò)原型對(duì)象prototype添加方法因悲。
（4）構(gòu)造函數(shù)的實(shí)例對(duì)象有_proto_屬性堕汞，指向構(gòu)造函數(shù)的原型對(duì)象prototype