ES6學習之關鍵字

来源:https://www.cnblogs.com/hongxuquan/archive/2018/12/22/10161631.html
-Advertisement-
Play Games

前言:什麼是ES6?ECMAScript 6(簡稱ES6)是JavaScript語言的下一代標準,已經在2015年6月正式發佈了。其中相比較於ES5新增了諸多的特性,並且ES6可轉換為ES5的語法。->線上ES6轉換為ES5工具。 本系列學習隨筆參考了阮一峰老師的《ES6標準入門》。 一、let關鍵 ...


前言:什麼是ES6?ECMAScript 6(簡稱ES6)是JavaScript語言的下一代標準,已經在2015年6月正式發佈了。其中相比較於ES5新增了諸多的特性,並且ES6可轉換為ES5的語法。->線上ES6轉換為ES5工具
本系列學習隨筆參考了阮一峰老師的《ES6標準入門》

一、let關鍵字

1、解決變數提升現象

我們在js中定義變數時,用var聲明會出現這種情況:

console.log(a); //不會報錯,輸出為undefined
var a=1;

這就是js的變數提升現象,當瀏覽器在解析函數時,會將var 聲明的變數聲明到函數的最前端,導致變數在聲明之前使用不會報錯,此時let關鍵字就解決了這個問題。let的作用域只在當前的代碼塊起作用。

console.log(a); //ReferenceError:a is not defined
let a=1;

2、不同代碼塊互不影響

由於let關鍵字作用只在當前代碼塊中起作用,所以不會受外部影響。

function n() {
  let a = 1;
  if (true) {
    let a = 5;
  }
  console.log(a); // 輸出1
};

3、同一代碼塊不能重覆定義

{
    var a=1;
    var a=2;//無報錯
}
{
	let a=1;
	let a=2;//Uncaught SyntaxError: Identifier 'a' has already been declared
}

二、const關鍵字

1、const聲明一個只讀的常量。一旦聲明,常量的值就不能改變。

const PI = 3.1415;
PI = 3;//Uncaught TypeError: Assignment to constant variable.

其本質是對象所存儲的記憶體地址不可變。

const PI={}  
PI.num=3.14159;//不會報錯  
PI={num=3.14159};//VM1187:1 Uncaught SyntaxError: Identifier 'PI' has already been declared

2、const聲明的常量必須聲明時就賦值;

const PI; // SyntaxError: Missing initializer in const declaration

3、const聲明的常量跟let的作用域一樣。

if (true) {
  const PI = 3.14159;
}
console.log(PI); // Uncaught ReferenceError: PI is not defined

三、super 關鍵字

我們都知道,this關鍵字總是指向函數所在的當前對象,ES6又新增super關鍵字,指向當前對象的原型對象。他有兩種使用方式:

1、當做函數使用

class parent {
    constructor() {
        console.log(11)
    }
}
class child extends parent{
    constructor() {
        super();
    }
}
let c = new child();//列印11

當做函數使用時,super()調用會生成一個空對象,作為context來調用父類的constructor,返回this對象,作為子類constructor的context繼續調用構造函數。

2、當做對象使用

const proto = {
  foo: 'hello'
};
const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

上面代碼中,對象obj.find()方法之中,通過super.foo引用了原型對象proto的foo屬性。

3、註意區分super與this

說到super與this的區別,我們就要先來看一下this關鍵字:
this關鍵字最終指向的是調用它的對象。我們可以看下麵兩個例子;

function GetThis(){
	console.log(this);
};
GetThis();//列印出window對象。

為什麼會這樣呢。其實最後的調用我們也可以寫成window.GetThis();調用他的就是window對象。
如果不信的話我們可以再舉個例子;

var getThis={ 
	user:'me',
	fn:function(){
		console.log(this);
	}
}
getThis.fn();//列印的就時getThis對象;

接下來我們再看一個this與super結合的例子就能理解了:

const proto = {
  x: 'hello',
  foo() {
    console.log(this.x);
  },
};
const obj = {
  x: 'world',
  foo() {
    super.foo();
  }
}
Object.setPrototypeOf(obj, proto);
obj.foo()// "world"

上面代碼中,super.foo指向原型對象proto的foo方法,但是綁定的this卻還是當前對象obj,因此輸出的就是world。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2016-12-22 14:28:39 該系列文章鏈接NoSQL 資料庫簡介Redis的安裝及及一些雜項基礎知識Redis 的常用五大數據類型(key,string,hash,list,set,zset)Redis 配置文件介紹Redis 持久化之RDBRedis 持久化之AOFRedis 主從複製 ...
  • 2016-12-22 15:30:43 本篇文章屬於Redis 系列第四篇文章:Redis 配置文件介紹 該系列文章鏈接 NoSQL 資料庫簡介 Redis的安裝及及一些雜項基礎知識 Redis 的常用五大數據類型(key,string,hash,list,set,zset) Redis 配置文件介 ...
  • Mysql資料庫的隔離級別有四種 1.read umcommitted 讀未提交(當前事務可以讀取其他事務沒提交的數據,會讀取到臟數據) 2.read committed 讀已提交(當前事務不能讀取其他事務沒提交的數據,只能讀取其他事務已經提交的數據,但會出現每次讀取的數據都會不同) 3.repea ...
  • 2016-12-21 14:54:20 該系列文章鏈接NoSQL 資料庫簡介Redis的安裝及及一些雜項基礎知識Redis 的常用五大數據類型(key,string,hash,list,set,zset)Redis 配置文件介紹Redis 持久化之RDBRedis 持久化之AOFRedis 主從複製 ...
  • TextSwitcher集成了ViewSwitcher, 因此它具有與ViewSwitcher相同的特性:可以在切換View組件時使用動畫效果。與ImageSwitcher相似的是,使用TextSwitcher也需要設置一個ViewFactory。與ImageSwitcher不同的是,TextSwi ...
  • 一、前言 今天帶來的是王牌大作戰的破解教程,游戲下載的話,我是直接去TapTap官網下載的 支付寶內購破解用老套了,今天學點破解的新花樣吧!! 二、支付寶內購破解 支付寶的內購破解已經很熟悉了, 直接搜索“9000”,之後找到代碼,修改判斷條件即可,若不明白,請看我之前寫的博客,Android破解之 ...
  • 1.請描述一下 cookies,sessionStorage 和 localStorage 的區別? 2.請解釋一下CSS3的Flexbox(彈性盒佈局模型),以及適用場景? 3.為什麼要初始化CSS樣式? 4.如何實現數組的隨機排序? 5.javascript 代碼中的"use strict";是 ...
  • websocket 初識 前言 其實很早就知道了 websocket 這個概念了,像現在大火的直播等使用的就是 websocket。之前找爬蟲工作,對面問我爬過 websocket 網站沒,很汗顏,那時候還只是聽說過。現在想瞭解一下,基於 JavaScript 語言。 Websocket 是什麼 w ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...