<dl id="opymh"></dl>

<div id="opymh"></div>
      <div id="opymh"><tr id="opymh"></tr></div>

        <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

        <em id="opymh"></em>

        <em id="opymh"><ol id="opymh"></ol></em>

              頻道欄目
              首頁 > 程序開發 > web前端 > HTML/CSS > 正文
              你可能不熟悉的JS總結
              2019-02-13 13:52:51           
              收藏   我要投稿

              暫時性死區

              只要塊級作用域存在let命令,它所聲明的變量就“綁定”這個區域,不再受外部的影響。這么說可能有些抽象,舉個例子:

              var temp = 123;
              if(true) {
                  console.log(temp);
                  let temp;
              }
              
              結果:
              > ReferenceError: temp is not defined

              在代碼塊內,使用let聲明變量之前,該變量都是不可用的。在語法上,稱為“暫時性死區”。(temporal dead zone)

              ES6規定暫時性死區和let、const語句不出現變量提升,主要是為了減少運行時錯誤,防止在變量聲明前就使用這個變量,從而導致意料之外的行為。

              call和apply方法

              這兩個方法都可以改變一個函數的上下文對象,只是接受參數的方式不一樣。
              call接收的是逗號分隔的參數。
              apply接收的是參數列表。

              相信你肯定看到過這樣的代碼:

              var arr = [1, 2, 3];
              var max = Function.prototype.apply.call(Math.max, null, arr);
              console.log(max); // 3

              那么對這段代碼怎么理解呢?

              1.將Function.prototype.apply看成一個整體
              (Function.prototype.apply).call(Math.max, null, arr)
              2.func.call(context, args)可以轉化為context.func(args)

              所以代碼被轉換為:

              Math.max.apply(undefined, arr)

              基本上到這一步已經沒必要去解釋了。

              那么你有沒有試過將call和apply互換位置呢?

              var arr = [1, 2, 3];
              var max = Function.prototype.call.apply(Math.max, null, arr);
              console.log(max); // -Infinity

              為什么的它的輸出結果為-Infinity呢?

              因為apply的第二參數必須為數組,這里并不是,所以參數不能正確的傳遞給call函數。
              根據func.apply(context, args)可以轉化為context.func(args)。所以被轉化成了Math.max.call(), 直接調用則會輸出-Infinity。

              如果想要正確調用,則應這樣書寫:

              var arr = [1, 2, 3];
              var max = Function.prototype.call.apply(Math.max, arr);
              console.log(max); // 3

              為了鞏固以上內容,且看一個面試題:

              var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);
              alert(a); 

              分析彈出的a值為多少?

              // 將call方法看成一個整體
              (Function.prototype.call).apply(function(a){return a;}, [0,4,3]);
              
              // func.apply(context, args)可以轉化為context.func(...args)
              (function(a){return a;}).call(0, 4, 3);
              
              // 所以結果很明顯,輸出4

              Proxy對象

              作用:用來自定義對象中的操作。

              let p = new Proxy(target, handler)

              target 代表需要添加代理的對象,handler 用來自定義對象中的操作,比如可以用來自定義 set 或者 get 函數。

              且看一個的小栗子:

              // onChange 即要進行的監聽操作
              var watch = (object, onChange) => {
                  const handler = {
                      // 如果屬性對應的值為對象,則返回一個新的Proxy對象
                      get(target, property, receiver) {
                          try {
                              return new Proxy(target[property], handler);
                          } catch (err) {
                              return Reflect.get(target, property, receiver);
                          }
                      },
                      // 定義或修改對象屬性
                      defineProperty(target, property, descriptor) {
                          onChange('define',property);
                          return Reflect.defineProperty(target, property, descriptor);
                      },
                      // 刪除對象屬性
                      deleteProperty(target, property) {
                          onChange('delete',property);
                          return Reflect.deleteProperty(target, property);
                      }
                  };
              
                  return new Proxy(object, handler);
              };
              
              
              // 測試對象
              var obj = {
                  name: 'bjw',
                  age: 22,
                  child: [1, 2, 3]
              }
              
              // 對象代理
              var p = watch(obj1, (type, property) => { 
                  console.log(`類型:${type}, 修改的屬性:${property}`)
              });
              
              p.name = 'qwe'
                類型:define, 修改的屬性:name
                "qwe"
              
              p.child
                Proxy{0: 1, 1: 2, 2: 3, length: 3}
               
              p.child.push(4)
                類型:define, 修改的屬性:3
                類型:define, 修改的屬性:length
                4
              
              p.child.length = 2
                類型:define, 修改的屬性:length
                2
              
              p.child
                Proxy{0: 1, 1: 2, length: 2}

              如果關注Vue進展的話,可能已經知道Vue3.0中將通過Proxy來替換原來的Object.defineProperty來實現數據響應式。之所以要用Proxy替換原來的API原因在于Proxy無需一層層遞歸為每個屬性添加代理,一次即可完成以上操作。性能上更好,并且原本的實現有一些數據更新不能監聽到,但Proxy可以完美監聽到任何方式的數據改變,相信通過上面的例子已經能夠感受到Proxy帶來的優勢了。唯一的缺點可能就是瀏覽器兼容性不太好了。

              Reflect對象

              為什么要有這樣一個對象?

              用一個單一的全局對象去存儲這些方法,能夠保持其他的JavaScript代碼整潔、干凈。(不然的話得通過原型鏈調用) 將一些命令式的操作delete、in使用函數代替,目的是為了讓代碼更好維護,避免出現更多的保留字。

              Reflect對象擁有以下靜態方法:

              Reflect.apply
              Reflect.construct
              Reflect.defineProperty
              Reflect.deleteProperty
              Reflect.enumerate // 廢棄的
              Reflect.get
              Reflect.getOwnPropertyDescriptor
              Reflect.getPrototypeOf
              Reflect.has
              Reflect.isExtensible
              Reflect.ownKeys
              Reflect.preventExtensions
              Reflect.set
              Reflect.setPrototypeOf

              具體函數細節:

              Reflect.apply(target, this, arguments)
              // target:目標函數
              // this:綁定的上下文對象
              // arguments:函數的參數列表
              Reflect.apply(target, this, arguments)
              
              const arr = [2, 3, 4, 5, 6];
              let max;
              // ES6
              max = Reflect.apply(Math.max, null, arr)
              
              // ES5  
              max = Math.max.apply(null, arr);
              max = Function.prototype.apply.call(Math.max, null, arr);
              Reflect.construct(target, argumentsList[, newTarget])
              // 這個方法,提供了一種新的不使用new來調用構造函數的方法
              function A(name) {
                  console.log('Function A is invoked!');
                  this.name = name;
              }
              A.prototype.getName = function() {
                  return this.name;
              };
              
              function B(age) {
                  console.log('Function B is invoked!');
                  this.age = age;
              }
              B.prototype.getAge = function() {
                  return this.age;
              };
              
              
              // 測試 (這兩種是一致的)
              var tom = new A('tom');
              var tom = Reflect.construct(A, ['tom']);
              
              
              // jnney繼承了A的實例屬性,同時繼承了B的共享屬性
              // 簡單來說,A構造函數被調用,但是 jnney.__proto__ === B.prototype
              var jnney = Reflect.construct(A, ['jnney'], B);
              
              Reflect.defineProperty(target, propertyKey, attributes)

              這個方法和Object.definePropperty(屬性定義失敗,會拋出一個錯誤,成功則返回該對象)相似,不過Reflect.defineProperty(屬性定義失敗,返回false,成功則返回true)返回的是一個Boolean值。

              let obj = {};
              
              let obj1 = Object.defineProperty(obj, 'name', {
                  enumerable: true,
                  value: 'bjw'    
              });
              
              // 這里會返回false 因為我們上面定義name這個屬性是不可修改的,
              // 然后我們又在這里修改了name屬性,所以修改失敗返回值為false
              let result1 = Reflect.defineProperty(obj, 'name', {
                  configurable: true,
                  enumerable: true,
                  value: 'happy'
              });
              console.log(result1); // false
              
              Reflect.deleteProperty(target, propertyKey)
              let obj = {
                  name: 'dreamapple',
                  age: 22
              };
              
              let r1 = Reflect.deleteProperty(obj, 'name');
              console.log(r1); // true
              let r2 = Reflect.deleteProperty(obj, 'name');
              console.log(r2); // true
              let r3 = Reflect.deleteProperty(Object.freeze(obj), 'age');
              console.log(r3); // false
              Reflect.get(target, propertyKey[, receiver])
              Reflect.set(target, propertyKey, value[, receiver])

              這個方法用來讀取/設置一個對象的屬性,target是目標對象,propertyKey是我們要讀取的屬性,receiver是可選的,如果propertyKey的getter函數里面有this值,那么receiver就是這個this所代表的上下文。

              Reflect.getOwnPropertyDescriptor(target, propertyKey)

              這個方法與Object.getOwnPropertyDescriptor方法類似,其中target是目標對象,propertyKey是對象的屬性,如果這個屬性存在屬性描述符的話就返回這個屬性描述符;如果不存在的話,就返回undefined。(如果第一個參數不是對象的話,那么Object.getOwnPropertyDescriptor會將這個參數強制轉換為對象,而方法 Reflect.getOwnPropertyDescriptor會拋出一個錯誤。)

              var obj = {age: 22}
              Reflect.getOwnPropertyDescriptor(obj, 'age')
              {value: 22, writable: true, enumerable: true, configurable: true}
              Reflect.getPrototypeOf(target)
              Reflect.setPrototypeOf(target, prototype)

              這個方法與Object.getPrototypeOf方法是一樣的,都是返回一個對象的原型,也就是內部的[[Prototype]]屬性的值。

              Reflect.setPrototypeOf與Object.setPrototypeOf方法的作用是相似的,設置一個對象的原型,如果設置成功的話,這個對象會返回一個true;如果設置失敗,這個對象會返回一個false。

              Reflect.has(target, propertyKey)

              這個方法相當于ES5的in操作符,就是檢查一個對象上是否含有特定的屬性;我們繼續來實踐這個方法:

              function A(name) {
                  this.name = name || 'dreamapple';
              }
              A.prototype.getName = function() {
                  return this.name;
              };
              
              var a = new A();
              
              console.log('name' in a); // true
              console.log('getName' in a); // true
              
              let r1 = Reflect.has(a, 'name');
              let r2 = Reflect.has(a, 'getName');
              console.log(r1, r2); // true true
              Reflect.isExtensible(target)

              這個函數檢查一個對象是否是可以擴展的,也就是是否可以添加新的屬性。(要求target必須為一個對象,否則會拋出錯誤)

              let obj = {};
              let r1 = Reflect.isExtensible(obj);
              console.log(r1); // true
              // 密封這個對象
              Object.seal(obj);
              let r2 = Reflect.isExtensible(obj);
              console.log(r2); // false

              模塊化

              使用模塊化,可以為我們帶來以下好處:

              解決命名沖突 提供復用性 提高代碼可維護性

              立即執行函數

              在早期,使用立即執行函數實現模塊化,通過函數作用域解決了命名沖突、污染全局作用域的問題。

              AMD 和 CMD

              這兩種實現方式已經很少見到,具體的使用方式如下:

              // AMD
              define(['./a', './b'],function(a, b){
                  // 模塊加載完畢可以使用
                  a.do();
                  b.do(); 
              });
              
              // CMD
              define(function(require, exports, module){
                  // 加載模塊
                  var a = require('./a');    
              });

              CommonJS

              CommonJS最早是Node在使用,目前可以在Webpack中見到它。

              // a.js
              module.exports = {
                  a: 1
              }
              
              // or 
              exports.a = 1;
              
              // 在b.js中可以引入
              var module = require('./a');
              module.a   // log 1

              難點解析:

              // module 基本實現
              var module = {
                  id: 'xxx',
                  exports: {}
              }
              
              var exports = module.exports;
              // 所以,通過對exports重新賦值,不能導出變量

              ES Module

              ES Module 是原生實現模塊化方案。

              // 導入模塊
              import xxx form './a.js';
              import { xxx } from './b.js';
              
              // 導出模塊
              export function a(){}
              
              // 默認導出
              export default {};
              export default function(){}
              

              ES Module和CommonJS區別

              CommonJS支持動態導入,也就是require(${path}/xx.js),ES Module不支持 CommonJS是同步導入,因為用于服務器端,文件都在本地,同步導入即使卡住主線程影響也不大。而ES Module是異步導入,因為用于瀏覽器,需要下載文件,采用同步導入會對渲染有很大影響 CommonJS在導出時都是值拷貝,就算導出值變了,導入的值也不會改變。如果想更新值,必須重新導入一次。但是ES Module采用實時綁定的方式,導入導出的值都指向同一個內存地址,所以導入值會跟導出值變化 ES Module 會編譯成 require/exports 來執行的

              手寫簡單版本的Promise

              const PENDING = 'pending';
              const RESOLVED = 'resolved';
              const REJECTED = 'rejected';
              
              function MyPromise(fn) {
                  const _this = this;
                  _this.state = PENDING;
                  _this.value = null;
                  _this.resolvedCallbacks = [];
                  _this.rejectedCallbacks = [];
              
              
                  // resolve函數
                  function resolve(value) {
                      if (_this.state === PENDING) {
                          _this.state = RESOLVED;
                          _this.value = value;
                          _this.resolvedCallbacks.map(cb => cb(_this.value));
                      }
                  }
              
                  // rejected函數
                  function reject(value) {
                      if (_this.state === PENDING) {
                          _this.state = REJECTED;
                          _this.value = value;
                          _this.rejectedCallbacks.map(cb => cb(_this.value));
                      }
                  }
              
                  // 當創建對象的時候,執行傳進來的執行器函數
                  // 并且傳遞resolve和reject函數
                  try {
                      fn(resolve, reject);
                  } catch (e) {
                      reject(e);
                  }
              }
              
              // 為Promise原型鏈上添加then函數
              MyPromise.prototype.then = function (onFulfilled, onRejected) {
                  const _this = this;
                  onFulfilled = typeof onFulfilled === 'function'  onFulfilled : v => v;
                  onRejected = typeof onRejected === 'function'  onRejected : r => {
                      throw r;
                  }
                  if (_this.state === PENDING) {
                      _this.resolvedCallbacks.push(onFulfilled);
                      _this.rejectedCallbacks.push(onRejected);
                  }
                  if (_this.state === RESOLVED) {
                      onFulfilled(_this.value);
                  }
                  if (_this.state === REJECTED) {
                      onRejected(_this.value);
                  }
                  return _this;
              }
              
              
              
              // 測試
              new MyPromise(function (resolve, reject) {
                  setTimeout(() => {
                      resolve('hello');
                  }, 2000);
              }).then(v => {
                  console.log(v);
              }).then(v => {
                  console.log(v + "1");
              })
              點擊復制鏈接 與好友分享!回本站首頁
              相關TAG標簽 JS 總結
              上一篇:用JavaScript實現功能齊全的單鏈表
              下一篇:react中使用css的7中方式(應該是最全的)
              相關文章
              圖文推薦
              點擊排行

              關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

              版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

              极速飞艇好假
              <dl id="opymh"></dl>

              <div id="opymh"></div>
                  <div id="opymh"><tr id="opymh"></tr></div>

                    <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                    <em id="opymh"></em>

                    <em id="opymh"><ol id="opymh"></ol></em>

                          <dl id="opymh"></dl>

                          <div id="opymh"></div>
                              <div id="opymh"><tr id="opymh"></tr></div>

                                <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                                <em id="opymh"></em>

                                <em id="opymh"><ol id="opymh"></ol></em>