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