建站
咨詢
售后
建站咨詢
新聞中心
接上昨天的《前端基礎知識整理匯總(上)》，這些知識雖然是很基礎的，但是對于系統(tǒng)的梳理還是非常有幫助的，也希望這些內容對你有所幫助。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網綜合服務，包含不限于成都網站制作、網站建設、外貿網站建設、四川網絡推廣、微信小程序開發(fā)、四川網絡營銷、四川企業(yè)策劃、四川品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供四川建站搭建服務，24小時服務熱線：13518219792，官方網址：www.cdcxhl.com
Call, bind, apply實現(xiàn)
- // call
- Function.prototype.myCall = function (context) {
- context = context ? Object(context) : window
- context.fn = this;
- let args = [...arguments].slice(1);
- const result = context.fn(...args);
- delete context.fn;
- return result;
- }
- // apply
- Function.prototype.myApply = function (context) {
- context = context ? Object(context) : window;
- context.fn = this;
- let args = [...arguments][1];
- let result;
- if (args.length === 0) {
- result = context.fn();
- } else {
- result = context.fn(args);
- }
- delete context.fn;
- return result;
- }
- // bind
- Function.prototype.myBind = function (context) {
- let self = this;
- let args = [...arguments].slice(1);
- return function() {
- let newArgs = [...arguments];
- return self.apply(context, args.concat(newArgs));
- }
- }
原型與原型鏈
每一個JavaScript對象(null除外)在創(chuàng)建的時候會關聯(lián)另一個對象，這個被關聯(lián)的對象就是原型。每一個JavaScript對象(除了 null)都具有的__proto__屬性會指向該對象的原型。JavaScript中所有的對象都是由它的原型對象繼承而來，而原型也是一個對象，它也有自己的原型對象，這樣層層上溯，就形成了一個類似鏈表的結構，這就是原型鏈。每一個對象都會從原型"繼承"屬性。
實例對象和構造函數(shù)都可以指向原型, 原型可以指向構造函數(shù)，不能指向實例(因為可以有多個實例)。
原型對象有兩個屬性，constructor 和 __proto__。
- function Person() {}
- var person = new Person();
- // 實例原型 === 構造函數(shù)原型
- person.__proto__ === Person.prototype // true
- // 原型構造函數(shù) === 構造函數(shù)
- Person.prototype.constructor === Person // true
react diff
- React 通過制定大膽的 diff 策略，將 O(n3) 復雜度的問題轉換成 O(n) 復雜度的問題;
- React 通過分層求異的策略，對 tree diff 進行算法優(yōu)化;
- 對樹進行分層比較，兩棵樹只會對同一層次的節(jié)點進行比較。
- React 通過相同類生成相似樹形結構，不同類生成不同樹形結構的策略，對 component diff 進行算法優(yōu)化;
- 如果是同一類型的組件，按照原策略繼續(xù)比較 virtual DOM tree。
- 如果不是，則將該組件判斷為 dirty component，從而替換整個組件下的所有子節(jié)點。
- 對于同一類型的組件，有可能其 Virtual DOM 沒有任何變化，如果能夠確切的知道這點那可以節(jié)省大量的 diff 運算時間，因此 React 允許用戶通過 shouldComponentUpdate() 來判斷該組件是否需要進行 diff。
- React 通過設置唯一 key的策略，對 element diff 進行算法優(yōu)化;
- 建議，在開發(fā)組件時，保持穩(wěn)定的 DOM 結構會有助于性能的提升;
遍歷對象
對象遍歷方法總結：
- for...in：遍歷對象自身， 包含繼承， 可枚舉，不含 Symbol 的屬性。
- Object.keys(obj)：遍歷對象自身, 不含繼承，可枚舉，不含 Symbol 的屬性。【values， entries】
- Object.getOwnPropertyNames(obj)：遍歷對象自身, 不含繼承, 不含 Symbol 的屬性, 不管是否可枚舉
- Object.getOwnPropertySymbols(obj): 遍歷對象自身, 不含繼承, 所有 Symbol 的屬性, 不管是否可枚舉
- Reflect.ownKeys(obj): 遍歷對象自身，不含繼承，所有鍵名，不管是否Symbol 和可枚舉。
- 對象其他方法：
- JSON.stringify()：只串行化對象自身，不含繼承，可枚舉，不含 Symbol屬性?！緁unction，undefined, Symbol會丟失， set、map會處理成空對象】
- Object.assign()：只拷貝對象自身，不含繼承， 可枚舉屬性, 不管是否是Symbol ?！救繑?shù)據(jù)類型屬性值】
異步加載腳本
默認情況下，瀏覽器是同步加載 JavaScript 腳本，即渲染引擎遇到