JS膏集03

1、復習

原型:* 在構造函數中有一個屬性:prototype,是原型,也是一個對象,程序員使用的* 在實例對象中有一個屬性:__proto__,是原型,也是一個對象,瀏覽器使用的,不是標準屬性* 實例對象和原型對象之間的聯系:原型鏈,通過__proto__和prototype** 實例對象的__proto__指向自己的構造函數的prototype,中也有__proto__,指向的是Object的prototype,中也有一個__proto__,指向的是null* 原型鏈:* 屬性的使用:搜索的過程,首先在當前的實例對象中找這個屬性,如果有則使用,如果沒有則去該實例對象的__proto__指向的原型對象中搜素,如果有則使用,如果沒有則undefined** function Person(name){* this.name=name;* }* Person.prototype.sex="男";* var per=new Person("小白");* //per.sex="女";* console.log(per.sex);//女--->sex屬性是實例對象的,實例對象中如果沒有就去原型對象中查找,補充:如果實例對象和原型對象中的屬性名字一樣,原型對象中的屬性的值是不會被修改的,修改是實例對象中的屬性** 原型的作用:數據共享(節省內存空間),實現繼承* 繼承:類與類之間的關系,js中沒有類的概念,js中可以模擬面向對象,可以使用構造函數來模擬類的概念,繼承是通過原型來實現的** 原型對象的指向是可以改變的* 實例對象的__proto__指向的是自己的構造函數的prototype,但是指向可以改變,為了繼承** js中的繼承是通過改變原型對象的指向來實現的* 繼承的方式:* 1.原型的繼承:傳遞參數的時候,所有的實例對象的屬性的值都一樣了(缺陷)* 2.借用構造函數繼承:不能使用父級的方法* 3.組合繼承:通過借用構造函數實現屬性的繼承,通過原型的方式繼承實現方法的繼承* 4.拷貝繼承:把一個對象A中的所有的屬性和方法直接復制一份到對象B中,B對象中就有了對象A中所有的內容,從而實現繼承** 函數定義的方式:函數的聲明,函數表達式,提示:盡可能的使用函數表達式的方式,或者說不要把函數的聲明放在if的語句中** 函數調用方式:* 1.普通模式:正常的定義函數和使用* 2.嚴格模式:"use strict";后面或者下面的代碼都是嚴格的語法的方式* 嚴格模式中的函數中的this是undefined* 普通模式中的函數中的this是window* 函數此時如果是一個方法,(方法是通過對象來調用的),那么此時方法中的this是實例對象,調用該方法的對象* 如果此時的函數當成一個構造函數來使用(new 函數名),那么此時里面的this還是實例對象* 為元素綁定事件的時候,該事件中的this也是觸發該事件的對象:按鈕的點擊事件,點擊事件中的this就是當前的按鈕* 定時器中傳入的函數,函數中的this,實際上是window,因為定時器是window下的一個方法** 目前的代碼還是按照的普通的模式來寫,* "use strict";這種嚴格模式,以后會慢慢的使用了** 函數也是對象,但是對象不一定是函數:* 對象中有__proto__* 函數中有prototype* 如果一個東西里面只有__proto__,那就說明是對象* 如果一個東西里面只有prototype,那就說明是函數,但是肯定也是對象,里面肯定也會有__proto__* Math是對象,但不是函數** 所有的函數都是Function的實例對象** apply和call** 都是方法,* 如何使用:* 函數想要使用apply或者call* 函數名.apply();* 函數名.call();* applye和call的作用:就是直接調用函數或者方法,改變里面的this的指向** 還可以是方法名使用applye或者call* 對象.方法名.apply();* 對象.方法名.call();* 如果此時apply和call中一個參數也沒有,或者是傳入了一個參數null,那么對象的方法中的this還是這個實例對象* per.sayHi();//這里的this就是per對象* per.sayHi.apply(null);或者是per.sayHi.call(null);sayHi中的this還是per對象* per.sayHi.apply(dog);或者per.sayHi.call(dog);那么此時的sayHi中的this就是dog這個對象*** 這兩個方法中如果什么參數也沒有,那么函數中的this就是window,如果傳入的第一個參數是null,那么該函數中的this也是window* function f1(){* console.log(this);* }* f1.apply();或者f1.call();或者f1.apply(null);或者f1.call(null)* 此時f1中的this就是window** apply和call的第一個參數要么是null,要么是一個對象,* apply中的第二個參數是數組,數組中的每個元素就是每個參數* call中的第二個參數后面所有的參數都是一個一個傳入的** function f1(x,y,z){** }* f1.apply(對象,[參數1,參數2,參數3]);* f1.call(對象,參數1,參數2,參數3);** 總結:apply和call都可以改變this的指向,* 直接:別人的方法想要變成自己的,就使用apply或者call,傳入自己的這個對象

2、原型及原型鏈
1)原型鏈是實例對象和原型對象之間的關系，關系是通過原型來聯系的
圖解：

2）原型的指向可以改變
構造函數及原型對象中的this就是實例對象

若此前為Student的構造函數的原型添加過相關屬性及方法，則此時再使用則報錯

3）原型最終指向的位置



4）原型指向改變后如何添加原型方法
需要先改變原型的指向再使用prototype添加原型方法

5）實例對象和原型對象的重名問題

6)神奇的原型鏈

7）繼承




通過原型實現繼承

使用

繼承案例： //動物的構造函數 function Animal(name,weight){ this.name=name; this.weight=weight; } Animal.prototype.eat=function(){ console.log("eat"); }; //狗的構造函數 function Dog(color){ this.color=color; } Dog.prototype=new Animal("柯基","18"); Dog.prototype.bite=function(){ console.log(" bite"); }; //哈士奇 function.ErHa(sex){ this.sex=sex; } ErHa.prototype=new Dog(“black”)； ErHa.prototype.play=function(){ console.log("pla yl") } var ErHa=new ErHa("male");

8）原型鏈

9）借用構造函數繼承
為了數據共享，改變原型指向，做到了繼承，通過改變原型的指向實現繼承
缺陷：因為改變原型指向的同時實現繼承，繼承過來的屬性值都是一樣的了，這就是問題。只能事后復制。但這樣不好，寫死了代碼。
解決方法：繼承時不用改變原型的指向，直接調用父級的構造函數的方式
來為屬性賦值即可。把要繼承的父級的構造函數拿過來用即可
借用構造函數：父級構造函數名.call(當前對象,屬性1,屬性2,…);

function Person(name,age){} function Student(name,age){ Person.call(this,name,age);//Person作為函數使用 }//可自己給值，但只繼承了屬性，方法未能繼承

10)組合繼承
即原型繼承加借用構造函數繼承

上面的改變原型指向來繼承不傳參，意味著屬性未被繼承，作廢，但之前通過借用構造函數已經被繼承過來了
10）拷貝繼承
把一個對象中的屬性和方法直接復制到另一個對象中
下面兩圖的改變地址指向并不是真正的拷貝


淺拷貝：

11）總結
12）看代碼中的繼承部分判斷原型的指向
構造函數首字母常大寫

30

3、高級函數
1）
2）函數的角色
函數聲明及函數表達式
函數聲明：

function f1(){ ... } f1();

函數表達式

var f=function(){ ... }; f();

函數聲明和函數表達式之間的區別
函數聲明如果放在if-else的語句中，在ie8中會出現問題。但使用函數的表達式則不會出現錯誤的情況
3）函數中的this

由上到下
①window
②當前的實例對象
③window
④實例對象
⑤實例對象
4）嚴格模式
“use strict” ;//嚴格模式
在此模式下函數調用一定要通過對象，而不能直接調用
放在所要限定的代碼的最上面，之后的所有代碼都要遵循嚴格模式
5）函數的不同調用方式
分為普通函數（函數名小括號直接調用），構造函數（通過new來創建對象后調用），對象的方法（對象.方法名小括號調用）
6）函數也是對象，但對象不一定是函數
如果一個東西里既有prototype又有下劃線proto，說明是函數，也是對象

Function 原型指向的是Object的protocoltype
7)數組中的函數調用
數組可以存儲任何類型的數據

一一調用

轉載于:https://www.cnblogs.com/Tanqurey/p/10485286.html

總結

以上是生活随笔為你收集整理的JS膏集03的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。