從零開始學習前端JAVASCRIPT — 11、JavaScript基礎this指向的四種情況

阿新 • • 發佈：2018-02-08

事件箭頭註意 idt 轉移如果箭頭函數 javascrip function

JavaScript中this的四種情況（非嚴格模式）

1、當this所在函數是事件處理函數時，this指向事件源。
2、當this所在函數是構造函數時，this指向new出來的對象。
3、this所在函數的所屬對象是誰，this指向函數所屬對象。
4、當this所在函數沒有所屬對象，this指向window對象

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
    </head>  
    <body>  
          <div id=" 
box" class="box" style="height: 100px; width:100px; background:#f3f3f3;"></div>
    </body>  
</html>  
  
<script type="text/javascript">  
//this  
//1、當this所在函數是事件處理函數時，this是事件源。  
document.getElementById("box").onclick = function(){  
 console.log(this); //this就是div.box 
}  
  
 
//2、當this所在函數是構造函數時，this是new出來的對象。  
function Person(name){  
    this.name = name;//this就是new出來的對象zhaosi
    console.log(this.name)
    this.eat = function(){  
        console.log(this.name+"is eatting");
    }  
}  
var zhaosi = new Person("趙四");  
  
// 3、this所在函數的所屬對象是誰，this就是誰。  
function Person(name){  
  
this.name = name;//就是new出來的對象liuneng
 this.eat = function(){  
     console.log(this.name+"is eatting");;//這個this是誰，誰調用eat，或者說調用eat時，前面的對象是誰，this就是誰  
 }  
}  
var liuneng = new Person("劉能");  
liuneng.eat();//這句話執行時，eat函數內部的this就是p1  
var laoqi = new Person("老七");  
laoqi.eat();//這句話執行時，eat函數內部的this就是p2  
  
//4、當this所在函數沒有所屬對象，this是window對象。全局變量都是window對象的屬性。 
function test(){  
    console.log(this);//這個this就是window  
}  
  
test();//window對象可以省略，所以，這句話就等價於window.test();  
  
//全局變量是window對象的屬性  
var t = "大腳";  
  
console.log(window.t);  
  
var obj = {  
    name:"李四"
}  
  
console.log(window.obj.name);  
  
//this轉移是經常碰到的問題  
//1)、註意區分this所在函數調用時的隸屬對象
  
//2)、如果不希望被this折磨可以選用ES6中的箭頭函數。  
  
</script>

從零開始學習前端JAVASCRIPT — 11、JavaScript基礎this指向的四種情況

從零開始學習前端開發 — 1、HTML基礎

大小 lpad 文件夾 check 受限安全性瀏覽器兼容列表 type 一、web標準 web標準-網頁制作的標準，它是由一系列標準組成的，主要包含三個方面：結構（html,xhtml）,表現（css）,行為（javascript）註：結構和表現的標準由w3

從零開始學習前端開發 — 3、CSS盒模型

左右 color 方法盒子模型圖片 enter das 設置方法 left ★ 盒子模型（標準的盒模型） css盒模型的概念及組成 css盒模型是css的基石，每個html標簽都可以看作是一個盒模型。 css盒模型是由內容(content)，補白或填充(paddi

從零開始學習前端開發 — 4、容器溢出

psi body gpo val 如果設置保留 post size 一、容器溢出語法：overflow:visible|hidden|scroll|auto|inherit; visible:默認值，溢出內容不會被裁剪，正常顯示 hidden: 溢出內容隱藏不可見 s

從零開始學習前端開發 — 3、元素類型

元素自己決定 right htm inpu 有效 add float 一、元素類型分類 html元素可分為三大類：塊元素，內聯元素，可變元素 1.塊元素常見塊元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,fieldset

從零開始學習前端開發 — 6、CSS寬高自適應

完全 content 代碼部分隱藏 -h 描述 tex tom 一、寬度自適應語法：width:100%; 註： a）塊狀元素的默認寬度為100% b) 當給元素設置寬度為100%時，繼承父元素的寬度 c) 通常使用寬度自適應實現通欄效果二、高度自適應語法：hei

從零開始學習前端開發 — 7、常見瀏覽器兼容性問題及圖片整合技術

火狐其中針對大小 webkit 最新 opacity屬性引擎優化 pac 一、常見瀏覽器兼容性問題 1.雙倍浮動bug 描述：塊狀元素設置了float後，又設置了橫向的margin，在IE6下顯示的margin值要比設置的值大解決方案：給float的元素添加di

從零開始學習前端開發 — 5、CSS布局模型

class width 數值 clas avi 樣式固定 eight 層疊一、css布局模型 1.流動模型（Flow）元素在不設置css樣式時的布局模型，是塊元素就獨占一行，是內聯元素就在一行逐個進行顯示 2.浮動模型（Float）使用float屬性來進行網頁布局，

從零開始學習前端開發 — 15、CSS3變形基礎過渡、動畫

steps 方式 css3動畫 rec step round 保持 start radius 一、css3過渡語法： transition: 過渡屬性過渡時間延遲時間過渡方式; 1.過渡屬性(transition-property) 取值：all 所有發生變化的cs

從零開始學習前端開發 — 17、CSS3背景與漸變

text 從零開始 spa circle gradient 需要 box style 內容一、css3背景切割： background-clip:border-box|padding-box|content-box; 作用：用來設置背景的可見區域 a) border-b

從零開始學習前端JAVASCRIPT — 11、JavaScript基礎this指向的四種情況

事件箭頭註意 idt 轉移如果箭頭函數 javascrip function JavaScript中this的四種情況（非嚴格模式） 1、當this所在函數是事件處理函數時，this指向事件源。2、當this所在函數是構造函數時，this指向new出來的

從零開始學習前端JAVASCRIPT — 5、JavaScript基礎ES5

blog rip 修正項目單個方向 light console 重復 1：ES5簡介 ECMAScript 5.1 (或僅 ES5) 是ECMAScript(基於JavaScript的規範)標準的修正。與HTML5規範進程本質類似，ES5通過對現有JavaScrip

從零開始學習前端JAVASCRIPT — 5、JavaScript基礎BOM

form 父窗口關閉 load confirm 滾動條分享 agent 負數 1：BOM（Browser Object Model）概念 window對象是BOM中所有對象的核心。 2：window屬性（較少用） self：self代表自己，相當於windo

從零開始學習前端JAVASCRIPT — 4、JavaScript基礎Math和Date對象的介紹

日期格 3.6 一次函數 gety 位置隨機 urn margin 開始 Math對象的介紹 1：Math對象 Math 對象用於執行數學任務。並不像 Date 和 String 那樣是對象的類，因此沒有構造函數 Math()。您無需創建它，通過把 Math 作為對

從零開始學習前端JAVASCRIPT — 3、JavaScript基礎string字符串介紹

con post ccf har 區分 nal ase star hid 1：字符串 JS中的任何數據類型都可以當作對象來看。所以string既是基本數據類型，又是對象。 2：聲明字符串基本數據類型：var sStr = ‘字符串’; 對象的方法：var oStr =

從零開始學習前端JAVASCRIPT — 14、閉包與繼承

註意退出二次需要正常 def 解決 doc span 1：閉包 1 . 概念：閉包就是能夠讀取其他函數內部變量的函數。在JS中，只有函數內部的子函數才能讀取局部變量，因此可以把閉包簡單理解為”定義在一個函數內部的函數”。 2 . 閉包的特

我是如何從零開始學習前端的

首先，我是個文科生，大學裡只學過vb，覺得計算機程式設計這東西太玄乎，不是我玩得轉的。後來機緣巧合去做了一家網際網路創業公司的HR，閱了上千份程式設計師的簡歷，面了上百個不同水平不同領域的程式設計師。跟程式設計師接觸得越多，我越覺得程式設計是一件很有挑戰、很有趣的事情。尤其是前端這一塊，結識了

Linux_從零開始學習_(11) 打包壓縮

1. 打包 / 解包打包壓縮是日常工作中備份檔案的一種方式在不同作業系統中, 常用的打包壓縮方式是不同的 Windows 常用 rar Mac 常用 zip Linux 常用 tar.gz tar 是 Lin

前端從零開始學習Graphql

學習本姿勢需要電腦裝有node,vue-cli相關環境，以及要有node,express,koa,vue相關基礎本文相關demo的github地址： node服務：https://github.com/liuming888/graphql_node_demo.git vue專案：https://g

從零開始學習html（五）與瀏覽者交互，表單標簽——下

定位開始系統 isp ctr 程序顯示 text 輸入六、使用下拉列表框進行多選 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-T

從零開始學習iOS開發1：認識xcode

連接啟動圖標主動認識 tor 音樂滴滴打車啟動 and 在開始之前還是不得不提一下iPhone應用開發的工具，我當然之前是沒接觸過iPhone開發，也沒使用過apple的不論什麽一種設備。所以我的概念中僅僅知道xcode是最專業的iOS開發工具。如今它是免費

從零開始學習前端JAVASCRIPT — 11、JavaScript基礎this指向的四種情況

相關推薦