JavaScript 之call , apply 和prototype 介紹

時間 2020-08-17

標籤 javascript apply prototype 介紹欄目 JavaScript 简体版

原文原文鏈接

1. 前言

爲何將這三個概念放在一塊兒說。緣由是這些是會在實現js 繼承會須要使用到的javascript

2. call 和 apply

call 和 apply 的做用基本相似，都是去執行function並將這個function 的context替換成第一個參數帶入。二者的不一樣是call 必須將function 的參數一一帶入，而 apply 只要在第二個參數帶入一個數列。

[javascript] view plain copy

function fn( arg1, arg2,... ){
// do something
}
fn( arg1, arg2,... );
fn.call( context, arg1, arg2,... );
fn.apply( context, [ arg1, arg2,... ]);

手冊的解釋：
===================================
call 方法
調用一個對象的一個方法，以另外一個對象替換當前對象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

參數
thisObj
可選項。將被用做當前對象的對象。

arg1, arg2, , argN
可選項。將被傳遞方法參數序列。

說明
call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj。
=====================================

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var func=new function(){this.a="func"}
var newfunc=function(x){
var a="newfunc";
alert(this.a);
alert(x);
}
newfunc.call(func,"inputParameter1");
/*alert are
* func/inputParameter1; not newfunc/inputParameter1
*/
</script>
</body>
</html>

從以上的例子能夠看出， alert(this.a), 返回的是並非當前函數裏的值。

使用call 執行的速度會稍微快一些，不過差別不大。

3.prototype

JavaScript沒有"子類"和"父類"的概念，也沒有"類"（class）和"實例"（instance）的區分，全靠一種很奇特的"原型鏈"（prototype chain）模式，來實現繼承。
prototype 其實就是構造函數的一個屬性。
全部實例對象須要共享的屬性和方法，都放在這個對象裏面；那些不須要共享的屬性和方法，就放在構造函數裏面。
實例對象一旦建立，將自動引用prototype對象的屬性和方法。也就是說，實例對象的屬性和方法，分紅兩種，一種是本地的，另外一種是引用的。

[javascript] view plain copy