首頁 web前端 js教程 函數呼叫的不同方式及this的指向詳解

函數呼叫的不同方式及this的指向詳解

Feb 06, 2018 am 09:22 AM
this 不同 方式

一、函數的呼叫方式

#1.作為函數,一種直接易懂的方式(即函數呼叫模式)。

2.作為方法,方法是連接在物件上的,被這個物件調用,這種形式就是物件導向程式設計。

3.作為建構器,在建構的過程中一個新的物件被創建出來。

4.經由函數的apply或call方法。

本文主要為大家帶來一篇淺談函數呼叫的不同方式,以及this的指向。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

二、函數參數

1.傳入參數

(1)傳入變數多於函數定義變數。

(2)函數定義變數多餘傳入變量,多出來的變數是undefined

2.函數在被呼叫的時候,隱形的傳入兩個參數argument和this(即argument和this被悄悄傳入函數,作用在函數的作用域)。

(1)argument:函數呼叫時傳入函數的變數集合(有arguemnt.length屬性)

eg:argument[0]指的是傳入函數的第一個參數

(2)this關聯一個物件。

根據呼叫方式的不同,this的指向也不同。因此this為呼叫的上下文(invocation context)。

三、this的指向

1.函數呼叫模式 (this->window)

這個函數並不屬於任何物件的屬性。

function fn1(){
 //some code
}
fn1();
或着:
var fn2=function(){
 //some code
}
fn2();
使用这种方式调用函数,函数的上下文是全局上下文(global context即window)。this->window。
登入後複製

2.方法呼叫模式   (this->方法所屬的物件)

這個函數是一個物件的屬性,當這個函數被呼叫時,這個函數被視為這個對象的一個方法。

var obj={
 //some code;
};
obj.getname=function(){
 //some name
}
obj.getname();
函数的上下文是这个对象(例子中的 obj)。this->obj
登入後複製

3.建構器呼叫模式(this->建立的新物件)

函數被當作建構器呼叫時有以下特點:

一個新的對象被創建出來;

這個新的物件被傳遞給這個建構器作為this參數,也就是說這個新的物件是建構器函數的上下文;

如果沒有顯性的return語句,這個新的物件會被隱式的return(就是悄咪咪的被return了),而成為這個構造器的值。

function Fn(){
 this.a=function(){
   return this;
 }
}
var n=new Fn();
console.log(n.a());//Fn{a:f}
console.log(n);//fn{a:f}
//此例中,构造了一个构造函数Fn((),利用new关键字调用时一个空的对象被创建出来,并传递到函数中作为this存在。this-Fn(新的)
//这个构造器同时创建了a属性,并将此属性作为一个方法赋予给它创建出新对象的实例。
登入後複製

4.apply()獲得call()方法  (this->可以是我們指定的任何物件)

(1)apply(),兩個參數。第一個參數:用於作為函數上下文的物件。第二個參數:一個參數數組。

(2)call(),兩個參數。第一個參數:用於作為函數上下文的物件。第二個參數:argument list。

call()和apply()多用於函數回呼。

function circle(list,calback){
 for(var i=0;i<list.length;i++){
   calback.call(list[i],i);
 }
}
var list=[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;];
circle(list,function(index){
 console.log(index);//0,1,2(即传进来的i值)
 console.log(this);//a,b,c(call的第一个参数)
});
//this->call()传递进来的第一个参数。
登入後複製

相關推薦:

mysqli批次執行多條語句和一次函數呼叫執行多條語句方法

微信小程式Page中data資料運算與函式呼叫詳解

如何解決js父級函數呼叫子函數出現函數未定義問題

以上是函數呼叫的不同方式及this的指向詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
Go 語言的時間處理方式有哪些? Go 語言的時間處理方式有哪些? Jun 10, 2023 pm 09:42 PM

Go語言作為一個現代化的程式語言,時間在開發中佔有很重要的地位。 Go語言提供了一些內建的時間函數和結構體,使得時間的處理變得更加便捷。在本篇文章中,將會介紹一些Go語言常用的時間處理方式。 time.Now()我們可以使用time.Now()函數取得目前的時間:now:=time.Now()fmt.Println(now)輸出:2019-06-131

有哪些不同的電腦語言? 有哪些不同的電腦語言? Aug 28, 2023 pm 02:25 PM

程式語言用來以電腦可以理解的語言為電腦發出指令。電腦語言分為三種類型,如下所示:機器語言符號語言高階語言機器語言電腦是一台機器。由於它的記憶體只能儲存1和0,因此必須以一串1和0的流的形式給電腦發出指令,即二進位代碼。這些對機器來說很容易理解。以二進位程式碼編寫的程式可以直接輸入電腦執行,這稱為機器語言。機器語言的優點包括:執行速度非常快。很難編寫和閱讀機器語言的程式。機器指令很難記住。符號語言也稱為組合語言。彙編程式包含「助記符」。 「助記符」是指以縮寫的形式很容易記住的訊息。符號語言的優

聊聊Vue2為什麼能透過this存取各種選項中屬性 聊聊Vue2為什麼能透過this存取各種選項中屬性 Dec 08, 2022 pm 08:22 PM

這篇文章帶大家解讀vue原始碼,來介紹一下Vue2中為什麼可以使用 this 存取各種選項中的屬性,希望對大家有幫助!

如何刪除 Chrome 網址列中不需要的網址? 如何刪除 Chrome 網址列中不需要的網址? Mar 08, 2024 am 09:19 AM

Chrome會自動在網址列中記錄曾經輸入過的網址,並且會在未來自動“聯想查詢內容”,但很多時候我們並不需要一些網址,如何刪掉它們呢?小編常常遇到這樣的困擾,曾經輸入過的地址,會擋在常用地址的前面,導致需要選好幾次才能進入需要的網站。為此我也找過至少3次如何刪除了,因為…每次都會忘記。在Chrome官方幫助Chrome鍵盤快捷鍵的地址列快捷鍵中,就明確了刪除快捷鍵:▍Windows刪除地址列聯想內容按向下箭頭鍵以突出顯示相應內容,然後按Shift+Delete鍵▍macOS刪除地址欄聯想內容按向下

一篇搞懂this指向,追趕70%的前端人 一篇搞懂this指向,追趕70%的前端人 Sep 06, 2022 pm 05:03 PM

同事因為this指向的問題卡住的bug,vue2的this指向問題,使用了箭頭函數,導致拿不到對應的props。當我跟他介紹的時候他竟然不知道,隨後也刻意的看了一下前端交流群,至今最起碼還有70%以上的前端程式設計師搞不明白,今天給大家分享一下this指向,如果啥都沒學會,請給我一個大嘴巴子。

如何在 iPhone 上使用快捷方式 如何在 iPhone 上使用快捷方式 Nov 29, 2023 am 09:06 AM

这些快捷方式可用于iPhone上的各种不同事情&gt;在当今充满活力和快速发展的世界中,对效率和便利性的追求占据了中心位置,iPhone上的快捷指令应用程序脱颖而出,成为一种非常强大的工具。它旨在简化和加速日常任务,显著提高工作效率。这个应用程序具有令人难以置信的适应性,使用户能够自动执行那些消耗宝贵时间的平凡、重复的动作。此外,它还提供了根据个人需求和偏好量身定制个性化命令的工具。Shortcuts应用程序特别引人注目的是它与Apple的智能助手Siri的集成。此功能允许使用直观的语音

比較link和import:它們有哪些差異? 比較link和import:它們有哪些差異? Jan 06, 2024 pm 08:23 PM

link與import之爭:它們有何不同之處?在開發和程式設計中,我們經常需要與其他文件或模組進行互動。為了實現這種交互,連結(linking)和導入(importing)是兩種常用的方式。然而,許多人可能不清楚link和import有什麼不同之處以及何時使用它們。本文將詳細介紹link和import的區別,並提供程式碼範例。首先,我們來了解link的概念。連結

jQuery與CSS3動畫功能有何不同?優劣對比 jQuery與CSS3動畫功能有何不同?優劣對比 Sep 08, 2023 am 10:00 AM

jQuery與CSS3動畫功能有何不同?優劣對比引言:如今,網頁設計已經越來越注重使用者體驗。而動畫效果作為增強使用者體驗的重要手段之一,在網頁設計中扮演重要角色。在實現動畫效果的過程中,開發者面臨選擇使用jQuery還是CSS3動畫的問題。本文將對兩者進行比較分析,探討其優劣之處,並為讀者提供相關程式碼範例。一、jQuery動畫:jQuery是一款功能強大的

See all articles