1. 每個函數都包含兩個非繼承而來的方法：call()方法和apply()方法。
2. 相同點：這兩個方法的作用是一樣的。
都是在特定的作用域中調用函數，等于設置函數體內this對象的值，以擴充函數賴以運行的作用域。

一般來說，this總是指向調用某個方法的對象，但是使用call()和apply()方法時，就會改變this的指向。

call()方法使用示例：? ? //例1
??

<script> window.color = 'red'; document.color = 'yellow';var s1 = {color: 'blue' }; function changeColor(){console.log(this.color); }changeColor.call(); ? ? ? ? //red (默認傳遞參數) changeColor.call(window); ? //red changeColor.call(document); //yellow changeColor.call(this); ? ? //red changeColor.call(s1); ? ? ? //blue </script>var Pet = {words : '...',speak : function (say) {console.log(say + ''+ this.words)}}Pet.speak('Speak'); // 結果：Speak...var Dog = {words:'Wang'}//將this的指向改變成了DogPet.speak.call(Dog, 'Speak'); //結果： SpeakWang

apply()方法使用示例：? ? //例1

? ? <script>window.number = 'one';document.number = 'two';var s1 = {number: 'three' };function changeColor(){console.log(this.number);}changeColor.apply(); ? ? ? ? //one (默認傳參)changeColor.apply(window); ? //onechangeColor.apply(document); //twochangeColor.apply(this); ? ? //onechangeColor.apply(s1); ? ? ? //three</script>

? ? //例2

? ? function Pet(words){this.words = words;this.speak = function () {console.log( this.words)}}function Dog(words){//Pet.call(this, words); //結果： WangPet.apply(this, arguments); //結果： Wang}var dog = new Dog('Wang');dog.speak();

3. 不同點：接收參數的方式不同。
apply()方法 接收兩個參數，一個是函數運行的作用域（this），另一個是參數數組。
語法：apply([thisObj [,argArray] ]);，調用一個對象的一個方法，2另一個對象替換當前對象。

說明：如果argArray不是一個有效數組或不是arguments對象，那么將導致一個?
TypeError，如果沒有提供argArray和thisObj任何一個參數，那么Global對象將用作thisObj。

call()方法 第一個參數和apply()方法的一樣，但是傳遞給函數的參數必須列舉出來。
語法：call([thisObject[,arg1 [,arg2 [,...,argn]]]]);，應用某一對象的一個方法，用另一個對象替換當前對象。

說明： call方法可以用來代替另一個對象調用一個方法，call方法可以將一個函數的對象上下文從初始的上下文改變為thisObj指定的新對象，如果沒有提供thisObj參數，那么Global對象被用于thisObj。

使用示例1：

? ? function add(c,d){return this.a + this.b + c + d;}var s = {a:1, b:2};console.log(add.call(s,3,4)); // 1+2+3+4 = 10console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14?

使用示例2：? ?

<script>window.firstName = "Cynthia";?window.lastName = "_xie";var myObject = {firstName:'my', lastName:'Object'};function getName(){console.log(this.firstName + this.lastName);}function getMessage(sex,age){console.log(this.firstName + this.lastName + " 性別: " + sex + " age: " + age );}getName.call(window); // Cynthia_xiegetName.call(myObject); // myObjectgetName.apply(window); // Cynthia_xiegetName.apply(myObject);// myObjectgetMessage.call(window,"女",21); //Cynthia_xie 性別: 女 age: 21getMessage.apply(window,["女",21]); // Cynthia_xie 性別: 女 age: 21getMessage.call(myObject,"未知",22); //myObject 性別: 未知 age: 22getMessage.apply(myObject,["未知",22]); // myObject 性別: 未知 age: 22</script>

數組

在JavaScript中數組可以存儲不同類型的數據，如下圖所示，讓我們來聲明一個存有不同類型數據的數組。

該數組中存儲了：數字，字符串以及布爾

?

Slice()

slice的中文翻譯是切片，顧名思義，從原數組中切出子數組，并將其賦值給新變量，同時不會改變原數組

from：從該索引值開始切片until：切片到該索引值（不包含該索引值）

如果我們想獲取包含原數組的前三個元素的子數組，應該怎么做呢？讓我們在Chrome開發者工具中實例運行下

?

?

newArray變量現在是一個新數組，且array的值未發生改變

?

?

?

總結

復制數組中的元素將它們作為新數組返回不會更改原始數組從from開始切片直到until索引：array.slice（from，until）切片不包括“until”索引值的元素可以用于數組和字符串

總結

以上是生活随笔為你收集整理的JS中的call()方法和apply()方法和slice()用法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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