1.with語句

擴展一個語句的作用域鏈

mdn強調(diào)：不建議使用with語句同云，它可能是混淆錯誤和兼容性問題的根源

• with會形成自己的作用域
• 目前已經(jīng)不推薦使用了
• with在嚴(yán)格模式下是不能使用的

var message="Hello Global";


//with語句：可以形成自己的作用域
var obj={name:"wjy",age:20,message:"obj"}
function foo(){
  
  function bar(){
    with(obj){ //先查找 with傳入的對象中查找驶社，再去查找對應(yīng)的AO對象，如果還是沒找到會一直往上查找涵防，直到全局作用域
      console.log(message);
    }
    
  }
  bar()
}

/**
 * * es5的作用域有兩種 函數(shù)作用域 和全局作用域
 */
foo()

2.eval函數(shù)

eval是一個特殊的函數(shù)闹伪，它可以將傳入的字符串當(dāng)做javascript代碼來運行。

var jsString='var message="Hello World";console.log(message);'

eval(jsString)

不建議在開發(fā)中使用

• eval代碼的可讀性非常的差（代碼的可讀性是高質(zhì)量代碼的重要原則）
• eval是一個字符串，那么有可能在執(zhí)行的過程中被刻意篡改偏瓤，那么可能會造成被攻擊的風(fēng)險
• eval的執(zhí)行必須經(jīng)過JS解釋器杀怠，不能被JS引擎優(yōu)化
  • 會被JS解釋器解釋為bytecode再轉(zhuǎn)化機器碼進行運行

2.1 應(yīng)用場景

webpack在進行項目打包的時候，會將es6和ts的代碼轉(zhuǎn)化為es5的一些語法厅克。

其實可以在webpack的devtool設(shè)置為eval

• 它會將js代碼轉(zhuǎn)化為字符串
• 性能會更高

3.嚴(yán)格模式

在ECMAScript5標(biāo)準(zhǔn)(es5)中赔退，JavaScript提出了嚴(yán)格模式的概念(Strict Mode)

• 嚴(yán)格模式很好理解，是一種具有限制性的JavaScript模式已骇，從而使代碼隱式脫離了“懶散模式”离钝，
• 支持嚴(yán)格模式的瀏覽器在檢測到代碼中有嚴(yán)格模式時，會以更加嚴(yán)格的方式對代碼進行檢測和執(zhí)行褪储；

嚴(yán)格模式對正常的JavaScript語義進行了一些限制：

• 嚴(yán)格模式通過拋出錯誤 來消除 原有的 靜默(silent) 錯誤

  • l23.name="abc";//靜默錯誤
    

• 嚴(yán)格模式下讓JS引擎在執(zhí)行代碼時可以進行更多的優(yōu)化（不需要對一些特殊的語法進行處理）

• 嚴(yán)格模式禁用了在ECMAScript未來版本中可能會定義的一些語法（不能使用保留字作為標(biāo)識符了）

保留字 是未來可能會變?yōu)殛P(guān)鍵字

3.1 開啟嚴(yán)格模式

那么如何開啟嚴(yán)格模式呢卵渴？嚴(yán)格模式支持粒度話的轉(zhuǎn)移

• 可以支持在js文件中開啟嚴(yán)格模式（文件頭部加 "use strict"）
• 也支持對某個函數(shù)開啟嚴(yán)格模式 (函數(shù)執(zhí)行體頭部 加 "use strict")

"use strict"
var message="Hello World"
console.log(message);
// * 靜默錯誤
true.foo="abc"

在實際項目開發(fā)中，js文件并不是直接部署到服務(wù)器上的鲤竹，而是先讓打包工具(webpack浪读、vite、rollup)先打包辛藻，在打包的過程中會自動注入嚴(yán)格模式

function foo(){
  "use strict"
  false.bar="bar"
}

foo()

3.2 嚴(yán)格模式限制

這里我們來說幾個嚴(yán)格模式下的嚴(yán)格語法限制：

• JavaScript被設(shè)計為新手開發(fā)者更容易上手碘橘，所以有時候本來錯誤語法，被認(rèn)為也是可以正常被解析的
• 但是這種方式可能會帶來安全隱患
• 在嚴(yán)格模式下吱肌，這種失誤就會被當(dāng)做錯誤痘拆，以便可以快速的發(fā)現(xiàn)和修改

1. 無法意外的創(chuàng)建全局變量

2. 嚴(yán)格模式會引起靜默失敗(silently fail，注：不報錯也沒有任何效果)的賦值操作拋出異常

3. 嚴(yán)格模式下試圖刪除不可刪除的屬性

4. 嚴(yán)格模式不允許函數(shù)參數(shù)有相同的名稱

5. 不允許0的八進制語法

6. 在嚴(yán)格模式下氮墨，不能使用with

7. 在嚴(yán)格模式下纺蛆，eval不再為上層引用變量

8. 嚴(yán)格模式下，this綁定不會默認(rèn)轉(zhuǎn)成對象

3.2.1 無法意外的創(chuàng)建全局變量

"use strict"
// *1. 不能意外的創(chuàng)建全局變量

message="hello";
function foo(){
  age=20;
}

3.2.2 不允許函數(shù)有相同的參數(shù)名

"use strict"
// * 2.不允許函數(shù)有相同的參數(shù)名稱
function foo(x,y,x){
  console.log(x,y,x);
}
foo(1,2,3)

3.2.3 引起靜默失敗

"use strict"
// * 3 引起靜默失敗
NaN=123
false.name="wjy"

var obj={};
Object.defineProperty(obj,"name",{
  writable:false,
  configurable:false
  value:"wjy"
})
obj.name='coderwhy'
delete obj.name

• writable:是否可寫
• configurable规揪；是否可配置
• value：設(shè)置值

3.2.4 不允許0的八進制

"use strict"
// * 不允許0的八進制語法
// * 不允許0的八進制語法
// var num=0123; //在嚴(yán)格模式下是錯誤的
var num2=0o123 ;//es6中使用 0o開頭表示八進制
var num3=0x123;//es6 0x表示 十六進制
var num4=0b101 //es6 0b表示二進制
console.log(num2,num3,num4); //83 291 5

3.2.5 eval不會為上層引用變量

// * eval 不會為上層引用變量
var jsString='var message="Hello World";console.log(message);'
eval(jsString)
console.log(message); //非嚴(yán)格模式下桥氏，eval會為全局作用域添加message屬性，所以是可以打印出來的

"use strict"
// * eval 不會為上層引用變量
var jsString='var message="Hello World";console.log(message);'
eval(jsString)
console.log(message); //非嚴(yán)格模式下字支，eval會為全局作用域添加message屬性，所以是可以打印出來的

3.2.6 with語句不允許使用

3.2.7 this不會默認(rèn)轉(zhuǎn)化為對象

• 自執(zhí)行函數(shù)的this指向undefined

"use strict"
function foo(){
  console.log(this);
}
foo()  //undefined

var obj={
  name:"wjy",
  foo:foo
}
obj.foo();//obj

//源碼上其實是window.setTimeout(fn,delay) 調(diào)用的使用是fn.apply(this,...)
setTimeout(()=>{
  console.log(this);//window
})

4.面向?qū)ο?/h3>

4.1 面向?qū)ο笫乾F(xiàn)實的抽象方式

• 對象是JavaSxript中一個非常重要的概念奸忽，這是因為對象可以將多個相關(guān)聯(lián)的數(shù)據(jù)封裝到一起栗菜，更好的描述一個事物

  • 比如我們可以描述一輛車：Car苛萎，具有顏色(color)蛙酪、速度(speed)桂塞、品牌(brand)凹蜂、價格(price)、行駛(travel)等等
  • 比如我們可以描述一個人：Person,具有姓名(name)阁危、年齡(age)玛痊、身高(height)、吃東西(eat)狂打、跑步(run)等等

• 用對象來描述事物擂煞，更有利于我們將現(xiàn)實的事物，抽離成代碼中的某個數(shù)據(jù)結(jié)構(gòu)

  • 所以有一些編程語言就是純面向?qū)ο蟮木幊陶Z言趴乡，比如:Java
  • 你在實現(xiàn)任何現(xiàn)實抽象時都需要先創(chuàng)建一個類，根據(jù)類再去創(chuàng)建對象

4.2 JavaScript的面向?qū)ο?/h4>

JavaScript其實支持多種編程范式晾捏，包括 函數(shù)式編程和面向?qū)ο缶幊?/strong>

• javascript的對象被設(shè)計為一組屬性的無序集合蒿涎，像是一個哈希表，有key和value組成
• key是一個標(biāo)識符名稱惦辛，value可以是任意類型劳秋，可以是其他對象或函數(shù)
• 如果值是一個函數(shù)，那么我們可以稱之為是對象的方法

4.2.1 如何創(chuàng)建一個對象

• 早期使用創(chuàng)建對象的方式最多的是 使用Object類胖齐，并且使用 new 關(guān)鍵字來創(chuàng)建一個對象
  • 這是因為早期很多javascript開發(fā)者是從java過來的俗批，它們也更習(xí)慣于java中通過new的方式來創(chuàng)建一個對象。
• 后來很多開發(fā)者為了方便起見市怎，都是直接通過字面量的形式來創(chuàng)建對象
  • 這種形式看起來更加的簡潔，并且對象和屬性之間的內(nèi)聚性也更強辛慰，所以這種方式后來就流行了起來区匠。

// 創(chuàng)建一個對象，對某一個進行抽象（描述）
//*  1.創(chuàng)建 方式一：通過new Object()創(chuàng)建
var obj=new Object();
obj.name="wjy"
obj.age=18;
obj.height=160
obj.running=function(){
  console.log(this.name+"在跑步 ");
}

// 2.創(chuàng)建方式二：字面量形式
var info={
  name:'kobo',
  age:50,
  height:190,
  eating:function(){
    console.log(this.name+"在吃東西");
  }
}

4.2.2 對象屬性的操作

• 獲取屬性
  • 對象.屬性名
  • 對象.['屬性名']
• 對屬性賦值
  • 對象.屬性名=xxxx
• 刪除屬性
  • delete 對象.屬性名
• 對象屬性的遍歷
  • for ……in

var obj={name:"wjy",age:20}
// 獲取屬性
console.log(obj.name);

// 對屬性進行賦值
obj.name="hyz"

// 遍歷屬性
for(let key in obj){
  console.log(key);
}
// 刪除屬性
delete obj.name

4.2.3對屬性操作的控制

• 在前面我們的屬性都是直接定義在對象內(nèi)部帅腌，或者直接添加到對象內(nèi)部

  • 但是這樣來做的時候就不能對這個屬性進行一些限制：比如這個屬性是否是可以通過delete刪除的驰弄？這個屬性是否在for..in遍歷的時候背遍歷出來

• 如果我們想要對一個屬性進行比較精準(zhǔn)的操作控制，那么我們就可以使用屬性描述符

  • 通過屬性描述符可以精確的添加或修改對象的屬性
  • 屬性描述符需要使用Object.defineProperty來對屬性進行添加或修改

4.2.4 Object.defineProperty（會修改原有對象速客，不是純函數(shù)）

• Object.defineProperty()方法會直接在一個對象上定義一個新屬性戚篙，或者修改對象的現(xiàn)有屬性，并返回此對象

  • Object.defineProperty(obj,prop,descriptor)
    

• 可接收三個參數(shù)：

  • obj要定義屬性的對象
  • prop要定義或修改的屬性的名稱或Symbol
  • descriptor要定義或修改的屬性描述符
    • 屬性描述符是一個對象

• 返回值：

  • 被傳遞給函數(shù)的對象

var obj={
  name:"wjy",
  age:18
}
// * 屬性描述符是一個對象溺职，這個對象有很多的配置
/**
 * * value:設(shè)置屬性的值
 */
Object.defineProperty(obj,"height",{
  value:1.88,//* 默認(rèn)添加的屬性是不可枚舉的岔擂，不可遍歷的
})
console.log(obj); //* 直接打印是沒有height屬性的  { name: 'wjy', age: 18 }
console.log(obj.height); //* 直接訪問height可以取到值 1.88

4.2.5 屬性描述符的分類

屬性描述符的類型有兩種：

• 數(shù)據(jù)屬性(Data Properties)描述符(descriptor)

• 存取屬性(Accessor訪問 器 Properties)描述符(Descriptor)

  	configurable	enumerable	value	writable	get	set
  數(shù)據(jù)描述符	可以	可以	可以	可以	不可以	不可以
  存取描述符	可以	可以	不可以	不可以	可以	可以

4.2.5.1 數(shù)據(jù)屬性描述符

數(shù)據(jù)屬性描述符有如下4個特性：

• [[Configurable]]：表示屬性是否可以通過delete刪除屬性位喂，是否可以修改它的特性、或者是否可以將它修改為存取屬性描述符

  • 當(dāng)我們直接在一個對象上定義某個屬性時乱灵，這個屬性的[[Configurable]]為true
  • 當(dāng)我們通過屬性描述符定義一個屬性時塑崖，這個屬性的[[Configurable]]默認(rèn)為false

• [[Enumerable]]：表示屬性是否可以通過for-in或者Object.keys()來返回該屬性

  • 當(dāng)我們直接在一個對象上定義一個屬性時，這個屬性的[[Enumerable]]為true
  • 當(dāng)我們通過屬性描述符定義一個屬性時痛倚，這個屬性的[[Enumerable]]默認(rèn)為false

• [[Writable]]：表示是否可以修改屬性的值

  • 當(dāng)我們直接在一個對象上定義一個屬性時规婆，這個屬性的[[Writable]]為true
  • 當(dāng)我們通過屬性描述符定義一個屬性時，這個屬性的[[Writable]]默認(rèn)為false

• [[value]]：屬性的value值蝉稳，讀取屬性值時會返回該值抒蚜，修改屬性時，會對其進行修改

  • 默認(rèn)情況下這個值是undefined

configurable

var obj={
  name:'wjy',
  age:22
}

Object.defineProperty(obj,"height",{
  value:1.99,
  configurable:false,//如果為false耘戚，則不能刪除該屬性嗡髓，也不能重新定義屬性描述符
})
delete obj.height
console.log(obj.height); //* 屬性并沒有刪除 

Object.defineProperty(obj,"height",{  //* 會報錯
  value:2.22,
  configurable:true
})

enumerable

var obj={
  name:'wjy',
  age:22
}

Object.defineProperty(obj,"height",{
  value:1.99,
  configurable:true,//如果為false，則不能刪除該屬性毕莱，也不能重新定義屬性描述符
  enumerable:false
})

for(let key in obj){
  console.log(key);
}
console.log(Object.keys(obj));

writable

var obj={
  name:'wjy',
  age:22
}

Object.defineProperty(obj,"height",{
  value:1.99,
  configurable:true,//如果為false器贩，則不能刪除該屬性，也不能重新定義屬性描述符
  enumerable:false,
  writable:false,//* 屬性的值是否可以被修改
})

obj.height=2.22 //* 這個屬于靜默錯誤
console.log(obj.height);//* 屬性的值沒有被修改成功朋截，

• 直接在對象內(nèi)部定義屬性或者對象上定義屬性

  • 默認(rèn)的value為賦值的值
  • 默認(rèn)的configurable為true
  • 默認(rèn)的enumerable為true
  • 默認(rèn)的writable為true

• 如果是通過屬性描述符定義屬性

  • 默認(rèn)的value為undefined
  • 默認(rèn)的configurable為false
  • 默認(rèn)的enumerable為false
  • 默認(rèn)的writable為false

4.2.5.1 存取屬性描述符

存取屬性描述符有如下的4個特征

• [[configurable]]：表示屬性是否可以用delete刪除蛹稍，是否可以修改新特性，是否可以轉(zhuǎn)換為數(shù)據(jù)屬性描述符

  • 和數(shù)據(jù)屬性描述符一致
  • 當(dāng)我們直接在一個對象上定義某個屬性時部服，唆姐，這個屬性的[[configuralbe]]為true
  • 當(dāng)我們通過屬性描述符定義的屬性，這個屬性的[[configurable]]默認(rèn)為false

• [[enumerable]]廓八；表示這個屬性是否可以通過for……in或Object.keys()返回的屬性

  • 和數(shù)據(jù)屬性描述符一致
  • 如果直接在對象上定義某個屬性奉芦，則這個屬性的[[enumerable]]為true
  • 通過屬性描述符定義的屬性，這個屬性的[[enumerable]]默認(rèn)為false

• [[get]]：獲取屬性時會執(zhí)行的函數(shù)剧蹂。默認(rèn)為undefined

• [[set]]：設(shè)置屬性時會執(zhí)行的函數(shù)声功。默認(rèn)為undefined

應(yīng)用場景

• 隱藏某個屬性被外界直接使用和設(shè)置
• 截取對象的某個屬性在訪問和設(shè)置的過程，可以通過存取屬性描述符

var obj={
  name:"wjy",
  age:20,
  _address:"懷化市"
}

//* 隱藏某個私有屬性被外界直接使用和賦值
//* 如果我們希望能獲取某個屬性它訪問和設(shè)置值的過程時宠叼，也會使用存取屬性描述符
Object.defineProperty(obj,"address",{
  configurable:true,
  enumerable:true,
  get(value){
    foo()
    return this._address;
  },
  set(value){
    bar()
    this._address=value
  }
})

console.log(obj.address);
obj.address="北京市"
console.log(obj.address);

function foo()
{
  console.log("獲取了address的值");
}
function bar(){
  console.log("設(shè)置了address的值");
}

5.總結(jié)

with-eval-嚴(yán)格模式-面向?qū)ο?png