Javascript - 函式分類 & this指向
阿新 • • 發佈：2021-06-26
js中定義函式的三種方式
通過例項來說明吧
<script>
//method1
function fn() {
console.log('fn created ');
}
//method2
var fn2 = function () {
console.log('fn2 created');
}
//method3
var fn3 = new Function('test', 'console.log(test);');
fn3('fn3 test');
console.dir(fn3);
console.log(fn3 instanceof Object);
</script> 執行上面例子，證明了函式也是物件。可以採用new + 建構函式的方式建立例項，第三種方式執行效率低。
函式的原型鏈
從結果可以看到Function原型物件的__proto__指向Object。
js中函式的分類和呼叫方式
通過例項來說明吧
<script>
//函式的分類和呼叫方式
//方式1 普通標準函式,this 指向window
function fn() {
console.log('fn1'+ this);
}
fn(); //本質是window.fn(); 全域性函式是window的成員
//方式2 物件的方法 this 指向呼叫者o
var o = {
sayHi: function () {
console.log('fn2'+this);
}
}
o.sayHi();
//方式3 建構函式 this指向新建立的物件，這裡指向star1
function Star(username){
this.username = username;
}
var star1 = new Star('ldh');
//方式4 繫結事件函式 this 指向函式的呼叫者 btn
var fn = function (){
console.log('btn 被點選了'+ this);
}
btn.onclick = fn;
//點選了按鈕就可以呼叫函式
//方式5 定時器函式 定時器實際是window成員 所以this 就是window
setInterval(function(){},1000);
//定時器按照設定的時間間隔去呼叫
//方式6 立即執行函式 this 是window 同方式一
(function(){console.log('function executed')})();
//不需要呼叫立即執行
</script> 通過上面的例子，基本上歸納了筆者瞭解的函式使用方式。通過方式4和方式6的對比，
我們可以知道函式後面加了() 表示立即呼叫，沒加()，表示函式的指標，只是指明函式不呼叫函式。
this 指向問題，牢記this指向呼叫者
https://www.98891.com/article-65-1.html
改變this 指向的三個函式
this 指向是JS中很重要的問題，在上面的函式分類中，已經有了系統的分析。下面重點總結改變this 指向的三個函式
call
把父類例項改成子類例項 實現屬性繼承
<script>
//call function
function Father(username, age) {
this.username = username;
this.age = age;
}
function Son(username, age, gender) {
Father.call(this, username, age);//實現繼承父類的屬性
this.gender = gender;
}
</script> apply
apply 和call 不同點，引數是陣列(偽陣列)。在apply內部會把陣列拆成元素
主要使用 藉助Math物件，Math.max.apply(Math, [4324, 45, 342, 23])
<script>
//apply function
var o = {
username: 'testuser'
};
function fn(arr) {
console.log(arr);
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log(this);
}
fn.apply(o, [23, 43]);
console.log(Math.max(43, 45, 243, 342));
console.log(Math.max.apply(Math, [4324, 45, 342, 23]));
</script>bind
只改變this 的指向 不呼叫函式
用途改變繫結事件的this，案例
<body>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<script>
//bind function
//案例：實現多個按鈕傳送驗證碼後 3s 可以再次傳送
var btns = document.querySelectorAll('button');
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
this.disabled = true;
setTimeout(function () {
this.disabled = false;//改變this 指向btn ,3000ms 後執行
}.bind(this), 3000);
}
}
</script>
</body>