原型鏈

作用：提供一個成員的查找機制，或者查找規則含義：由原型所串聯起來的鏈裝結構

在這里插入圖片描述

JavaScript 的成員查找機制(規則)

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

擴展內置對象

可以通過原型對象，對原來的內置對象進行擴展自定義的方法。比如給數組增加自定義求偶數和的功能。

console.log( Array.prototype );// 添加求和方法Array.prototype.sum = function () {var sum = 0;for (var i = 0; i < this.length; i++) {sum += this[i];}return sum;}var arr = [1,2,3];console.log( arr.sum() );var newArr = [6,7,8,9];console.log( newArr.sum() );

繼承

ES6之前并沒有給我們提供extends繼承。我們可以通過構造函數+原型對象模擬實現繼承，被稱為組合繼承。

call()調用這個函數, 并且修改函數運行時的this 指向fun.call(thisArg, arg1, arg2, ...);call把父類的this指向子類thisArg ：當前調用函數this 的指向對象arg1，arg2：傳遞的其他參數

利用構造函數實現子類的繼承：

屬性的繼承

function Father (uname,age) {// this指向父類的實例對象this.uname = uname;this.age = age;// 只要把父類的this指向子類的this既可}function Son (uname, age,score) {// this指向子類構造函數// this.uname = uname;// this.age = age;// Father(uname,age);Father.call(this,uname,age);this.score = score;}Son.prototype.sing = function () {console.log(this.uname + '唱歌')；}var obj = new Son('劉德華',22,99);console.log(obj.uname);console.log(obj.score);obj.sing();

方法的繼承：

實現方法把父類的實例對象保存給子類的原型對象

一般情況下，對象的方法都在構造函數的原型對象中設置，通過構造函數無法繼承父類方法。核心原理：①將子類所共享的方法提取出來，讓子類的prototype 原型對象= new 父類()  ②本質：子類原型對象等于是實例化父類，因為父類實例化之后另外開辟空間，就不會影響原來父類原型對象③將子類的constructor


function Father () {}Father.prototype.chang = function () {console.log('唱歌');}function Son () {}// Son.prototype = Father.prototype;Son.prototype = new Father();var obj = new Son();obj.chang();Son.prototype.score = function () {console.log('考試');}// obj.score();// console.log(Son.prototype);console.log(Father.prototype);

注意：一定要讓Son指回構造函數

實現繼承后，讓Son指回原構造函數Son.prototype = new Father();Son.prototype.constructor = Son;

總結：用構造函數實線屬性繼承，用原型對象實線方法繼承

組合繼承：構造函數和原型對象

? 屬性：調用父構造函數，用call改變this指向

? 方法：父實例對象賦值給子原型對象，最后再指回構造函數本身

上午回顧：

? JavaScript查找成員機

? 原型鏈：就是由原型構成鏈狀結構，作用：查找成員機制

? 繼承：ES6：extends

? ES5：組合繼承：構造函數和原型對象

? 屬性：調用父類的時候用call改變this指向

? 方法：父實例對象賦值給子原型對象，再指回構造函數本身

類的本質

class本質還是function類的所有方法都定義在類的prototype屬性上類創建的實例,里面也有__proto__ 指向類的prototype原型對象所以ES6的類它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。所以ES6的類其實就是語法糖.語法糖:語法糖就是一種便捷寫法.   簡單理解, 有兩種方法可以實現同樣的功能, 但是一種寫法更加清晰、方便,那么這個方法就是語法糖

	class Star {}console.log( typeof Star );var obj = new Star();console.log(obj.__proto__);console.log(Star.prototype);

ES6：類class 類名 {// 構造函數constructor (uname, age) {this.uname = age;this.age = age;}// 方法say () {console.log('方法');}}// 實例化var obj = new 類型('姓名', 23);// 繼承：class Father {}class Son extends Father {super調用父類里面的方法}ES5：
創建對象：字面量：var obj = {};構造函數：var obj = new Object();自定義構造函數：// 構造函數function Person (uname， age) {this.uname = uname; this.age = age;}// 原型對象Person.prototype.say = function () {方法}// 實例對象var obj = new Person('姓名', 21);注意：構造函數里面放屬性，原型對象里面放方法原型對象：每個構造函數都有這個prototype，作用：共享方法，節省內存對象原型：每個對象都有__proto__，作用：指向原型對象(prototype)構造函數：construtor，作用：指回構造函數本身原型鏈：每個對象都有原型，原型對象也是對象，也有原型，一直串聯起來作用：用來提供成員查找機制繼承：組合繼承：構造函數，原型對象屬性：用call改變父類里面的this指向方法：父實例對象賦值給子原型對象，最后指回構造函數本身;

ES6 中的新增方法

ES6 中給我們新增了一些方法，可以很方便的操作數組或者字符串，這些方法主要包括：數組方法：字符串方法

數組方法：

迭代(遍歷)方法：forEach()、map()、filter()、some()、every()；這些方法都是遍歷數組的forEach();遍歷數組
filter();遍歷篩選數組
some();遍歷查找數組數組.方法名(function (當前項，當前項索引值，數組本身) {});

forEach()

array.forEach(function(currentValue, index, arr))currentValue：數組當前項的值
index：數組當前項的索引
arr：數組對象本身

var arr = ['red','blue','yellow','orange'];arr.forEach(function (elm,i,arrAbc) {console.log(elm,i,arrAbc);
});

filter()

array.filter(function(currentValue, index, arr))filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素,主要用于篩選數組
注意它直接返回一個新數組filter：篩選指定的滿足條件的元素，組成新數組返回currentValue: 數組當前項的值index：數組當前項的索引arr：數組對象本身?回調函數里面添加return添加返回條件

var arr = [100,66,99,123,333,33,44,66];var reArr = arr.filter(function (elm, a, n) {// console.log(elm,a, n);return elm % 2 == 0;});console.log(reArr);

some()

array.some(function(currentValue, index, arr)) 【注意：找到或者滿足條件立刻停止】some() 方法用于檢測數組中的元素是否滿足指定條件. 通俗點查找數組中是否有滿足條件的元素注意它返回值是布爾值, 如果查找到這個元素, 就返回true , 如果查找不到就返回false.如果找到第一個滿足條件的元素,則終止循環. 不在繼續查找.currentValue: 數組當前項的值?index：數組當前項的索引arr：數組對象本身

var arr = [100,200,300,400];
var re = arr.some(function (elm,i,arr) {// console.log(elm,i,arr);console.log(i);return elm >= 200;});
console.log(re);

字符串方法：

**trim方法：**刪除兩邊的空白符

var str = '      abcd ef gab cd ';
console.log( str );
console.log( str.trim() );// 獲取元素var btn = document.getElementById('btn');var txt = document.getElementById('txt');// 添加事件btn.onclick = function () {// 寫的內容if (txt.value.trim().length > 0) {alert('允許提交');} else {alert('不允許提交');}}

課程回顧：

? 原型鏈：由原型串聯起來的鏈式結構，提供成員查找的機制

? 繼承：組合繼承（構造函數【屬性】，原型對象【方法】）

? 屬性：調用父構造函數的時候，用call改變this的指向

? 方法：父實例對象賦值給子原型對象，最后指回構造函數本身

? 類的本質：函數，ES6語法糖

? 新增方法：

? 數組方法：forEach，filter，some

? 字符串方法：trim

) {

// console.log(elm,a, n);
return elm % 2 == 0;});console.log(reArr);


**some()**

array.some(function(currentValue, index, arr)) 【注意：找到或者滿足條件立刻停止】

some() 方法用于檢測數組中的元素是否滿足指定條件. 通俗點查找數組中是否有滿足條件的元素

注意它返回值是布爾值, 如果查找到這個元素, 就返回true , 如果查找不到就返回false.

如果找到第一個滿足條件的元素,則終止循環. 不在繼續查找.

currentValue: 數組當前項的值?index：數組當前項的索引

arr：數組對象本身

var arr = [100,200,300,400];
var re = arr.some(function (elm,i,arr) {
// console.log(elm,i,arr);
console.log(i);
return elm >= 200;
});
console.log(re);

## 字符串方法：**trim方法：**刪除兩邊的空白符

var str = ’ abcd ef gab cd ';
console.log( str );
console.log( str.trim() );

// 獲取元素
var btn = document.getElementById(‘btn’);
var txt = document.getElementById(‘txt’);

	// 添加事件btn.onclick = function () {// 寫的內容if (txt.value.trim().length > 0) {alert('允許提交');} else {alert('不允許提交');}}


課程回顧：?	**原型鏈**：由原型串聯起來的鏈式結構，提供成員查找的機制?	**繼承**：組合繼承（構造函數【屬性】，原型對象【方法】）?		屬性：調用父構造函數的時候，用call改變this的指向?		方法：父實例對象賦值給子原型對象，最后指回構造函數本身?		類的本質：函數，ES6語法糖?	新增方法：?		**數組方法：forEach，filter，some**?		字符串方法：trim.