動態

@willemwei

模擬實現js中的new操作符

new 運算符創建一個用户定義的對象類型的實例或具有構造函數的內置對象的實例。 這是MDN上對new操作符的定義,從這句話中可以看出new返回的其實就是一個實例,那麼問題來了實例又是個啥東西? 先看個例子: function Cat(name, gender) { this.name = name; this.gender = gender; } Cat.prototype.sa

willemwei 頭像

@willemwei

昵稱 WillemWei

@willemwei

模擬實現Javascript中的bind函數

bind() 方法創建一個新的函數,在 bind() 被調用時,這個新函數的 this 被指定為 bind() 的第一個參數,而其餘參數將作為新函數的參數,供調用時使用。 從MDN對於bind的描述來看: 返回值是一個函數,而不是執行結果 this值會指向第一個參數 其餘參數會作為新函數的參數 看個例子: function test(name, age) { console.lo

willemwei 頭像

@willemwei

昵稱 WillemWei

@dabaibai_5ebb89514c34a

js原型知識梳理(二)

最近重新梳理了一下原型的知識,想分享一下,希望對那些被原型,原型鏈,構造函數,實例對象等關係滿頭包的童鞋有些幫助~~~ 廢話不説了 上代碼 //原型 prototype function Man(name,age){ this.name=name, this.age=age } let Pers

dabaibai_5ebb89514c34a 頭像

@dabaibai_5ebb89514c34a

昵稱 大白白

@aihuanhuan

巧用 concat 和 apply 將對象或二維數組轉化為一維數組

場景: 在用node寫接口的時候,做了 SQL 防注入,並且封裝了一個能返回 修改數據庫sql語句 的方法,由於使用了佔位符,所以需要將傳入的對象按照 key-value 的方式一個個的對應上去。 實現: 先介紹一下這兩個方法 concat 方法用於合併兩個或多個數組。此方法不會更改現有數組,而是返回一個新數組。 如果該方法的參數是一個元素,該元素會被直接插入到新數組中;如果參數是一個數組,該數組

aihuanhuan 頭像

@aihuanhuan

昵稱 艾歡歡

@tianzhich

【譯】繼承與原型鏈(Inheritance and the prototype chain)

前言 原文來自MDN JavaScript主題的高階教程部分,一共5篇。分別涉及繼承與原型、嚴格模式、類型數組、內存管理、併發模型和事件循環。本篇是第一部分,關於繼承和原型。 原文鏈接請點我 下面是正文部分: 對於熟悉基於類的編程語言(例如 Java 和 C++)的開發者來説,JavaScript 會讓他們感到困惑,因為 JS 的動態性以及其本身並不提供class的實現(ES2015 中提出的c

tianzhich 頭像

@tianzhich

昵稱 小志Chris

@hai2007

理解prototype和__proto__(繼承與原型鏈)

從關係圖中可以看出來,ECMAScript中創建一個對象是通過new構造函數實現的,而本質上來説這個對象其實是以構造函數的屬性prototype指向的對象為基本模板的,因此新對象的__proto__屬性表明了自己來源於誰。 prototype 該屬性用來指向創建一個對象的基本模板,默認指向new構造函數,也可以修改,或者通過改屬性為新對象添加屬性。 需要注意的是,該屬性只有函數才有。 //構造函

hai2007 頭像

@hai2007

昵稱 你好2007

@flydean

在java程序中使用protobuf

簡介 Protocol Buffer是google出品的一種對象序列化的方式,它的體積小傳輸快,深得大家的喜愛。protobuf是一種平台無關和語言無關的協議,通過protobuf的定義文件,可以輕鬆的將其轉換成多種語言的實現,非常方便。 今天將會給大家介紹一下,protobuf的基本使用和同java結合的具體案例。 為什麼使用protobuf 我們知道數據在網絡傳輸中是以二進制進行的,一般我們使

flydean 頭像

@flydean

昵稱 flydean

@flydean

protocol buffer沒那麼難,不信你看這篇

簡介 上一篇文章我們對google的protobuf已經有了一個基本的認識,並且能夠使用相應的工具生成對應的代碼了。但是對於.proto文件的格式和具體支持的類型還不是很清楚。今天本文將會帶大家一探究竟。 注意,本文介紹的協議是proto3版本的。 定義一個消息 protobuf中的主體被稱為是message,可以將其看做是我們在程序中定義的類。我們可以在.proto文件中定義這個message對

flydean 頭像

@flydean

昵稱 flydean

@wuyagege

JavaScript創建對象的多種方法

方法一 ----通過字面量創建 let obj = { name: 'zhang', age: 12, sayName: function () { console.log(this.name); } } console.log(obj);//{ name: 'zhang', age: 12, sayName: [Function: sayName

wuyagege 頭像

@wuyagege

昵稱 雲綺棠兮

@tsteam

理解原型/原型鏈

對於搞前端的小夥伴來説,不管是新手還是老鳥,我想對於原型應該都被折騰過,總是雲裏霧裏的感覺,要是原型都沒搞明白,你還好意思説你是前端攻城獅? 關於對象 當一説到面向對象(Object-Oriented OO)時,你第一反應肯定想到類、對象、接口實現等概念,那我們這裏為啥已上來就説對象呢?因為ECMAScript裏沒有類,另外因為ECMAScript中的函數沒有簽名,所以也沒有接口。 ECMAScr

tsteam 頭像

@tsteam

昵稱 tsteam

@lewyon

javaScript原型和原型鏈

前言 在瞭解原型和原型鏈之前,我們先了解一部分概念,constructor,prototype,__proto__。 constructor 在之前判斷數據類型的文章: javaScript常見數據類型檢查校驗 有提到過關於構造函數的屬性constructor constructor 的是返回創建實例對象的 構造函數的引用,這個屬性的值是對函數本身的引用,而不是一個包含函數名稱的字符串 具體

lewyon 頭像

@lewyon

昵稱 程序猿布歐

@lewyon

JavaScript擴展原型鏈淺析

前言 上文對原型和原型鏈做了一些簡單的概念介紹和解析,本文將淺析一些原型鏈的擴展。 javaScript原型和原型鏈 http://lewyon.xyz/prototype.html 擴展原型鏈 使用new操作符 利用原型是對象的特性,實例化對象的時候,繼承多個構造函數的屬性和方法 兼容性:支持目前以及所有可想象到的瀏覽器 (IE5.5 都可以使用) function parent1(

lewyon 頭像

@lewyon

昵稱 程序猿布歐

@congjunhua

JavaScript的對象、原型、類和繼承

前言 HTML萬物皆標籤。 CSS萬物皆盒。 JavaScript萬物皆對象。 對象 JavaScript對象的本質是數據和功能的集合,語法上表現為鍵值對的集合。 鍵 對象的鍵可以理解為變量名。 值 對象的值的類型可以是任意數據類型。 鍵值對 鍵和值之間用:相連。 多組鍵值對之間用,分割。 let profile = { name: '吳彥祖', age: 48, char

congjunhua 頭像

@congjunhua

昵稱 從君華

@mi2nagemao

js原型鏈圖解

參考《你不知道的JavaScript(上卷)》,按照自己理解做的對象關聯關係圖解,不保真。 細節重申 對象通過原型鏈(__proto__)查找屬性,一直到找到為止; new 的主要作用是創建新對象,其__proto__指向函數的 prototype,以及關聯this到新對象; Object.create 創建新對象,並將其__proto__指向舊對象。 依圖校驗 function Foo

mi2nagemao 頭像

@mi2nagemao

昵稱 夜遊神

@alijishu

理解JS中的原型(Prototypes)

全新對象 在JS中,對象是有很多key和value構成的一種數據存儲結構。例如,如果想描述一個人的基本信息,可以構建一個擁有firstName和lastName的對象,並且分別被賦值為北宸和範。在JS對象中的key的值是String類型的。 在JS中,可以用Object.create創建一下全新的對象: //構建了一個空對象 var person = Obeject.create(null)

alijishu 頭像

@alijishu

昵稱 阿里雲開發者

@budebinglin

JavaScript 原型鏈詳解

繼續補檔,發現這塊內容其實蠻多的。後面估計還會有兩篇(怎麼還有兩篇啊喂!),分別是 JavaScript執行原理·補 和 JavaScript部分特性,這周不知道能不能搞定。 先看 JS 原型鏈吧。 JS 繼承機制設計 1994年,網景公司(Netscape)發佈了 Navigator v0.9,轟動一時。但當時的網頁不具備交互功能,數據的交互全部依賴服務器端,這浪費了時間與服務器資源。 網景公司

budebinglin 頭像

@budebinglin

昵稱 阿菇kinoko

@jrainlau

基於 AST 的代碼自動生成方案

最近接到了一個需求,需要通過第三方提供的 d.ts 文件來定義對應的 JS SDK 文件,其形式如下: 第三方提供的 d.ts 文件: export class SDK { start(account: string); close(); init(id: string): Promise{ result: number; } } 定義出來的 JS SDK 文件: // 初始化 wr

jrainlau 頭像

@jrainlau

昵稱 jrainlau

@heiyanjing

AST語法樹增刪改查

AST 是 Abstract Syntax Tree 的縮寫,即 “抽象語法樹”.它是以樹狀的形式表現編程語言的語法結構. webpack 打包 JS 代碼的時候,webpack 會在我們的原有代碼基礎上新增一些代碼, 例如我們可以在打包JS 代碼的時候將高級代碼轉為低級代碼,就是通過 AST 語法樹來完成的 AST在線生成地址 babel插件查看使用地址 AST生成過程由源碼-詞法分

heiyanjing 頭像

@heiyanjing

昵稱 HeiYanjing

@tsteam

AST初探

前端開發中,使用了很多工具,譬如webpack、eslint來提升研發效率,但我們並不知道這些工具的實現原理。基於這些工具的核心都是抽象語法樹,那我們就從抽象語法樹開始理解底層原理的新世界吧。 一、抽象語法樹是什麼 顧名思義,首先可以確定的是,這是一顆跟語法相關的樹。 先上一盤硬菜,維基百科定義如下: In computer science, an abstract syntax tree (AS

tsteam 頭像

@tsteam

昵稱 tsteam

@jackdan9

AST (Abstract Syntax Tree)

AST (Abstract Syntax Tree) 標題 內容 AST AST定義,使用方式,原理 AST AST例子 AST AST應用 AST 定義 AST(Abstract Syntax Tree)抽象語法樹,簡稱AST,它是源代碼(也就是説它不僅僅是應用於JavaSc

jackdan9 頭像

@jackdan9

昵稱 jackdan9

@doupifaner

AST,真香

豆皮粉兒們,又見面了,今天這一期,由字節跳動數據平台的太郎醬,帶大家走進AST的世界。 作者:太郎醬 什麼是AST 抽象語法樹(Abstract Syntax Tree, AST),是源代碼的抽象語法結構的樹狀表示,與之對應的是具體語法樹;之所以是抽象的,是因為抽象語法樹並不會表示出真實語法中出現的每一個細節,而且是文法無關、不依賴於語言的細節;可以把AST想象成一套標準化的編程語言接口定義,只不

doupifaner 頭像

@doupifaner

昵稱 豆皮範兒

@musicfe

手把手帶你走進Babel的編譯世界

作者:BoBoooooo 前言 談及 Babel,必然離不開 AST。有關 AST 這個知識點其實是很重要的,但由於涉及到代碼編譯階段,大多情況都是由各個框架內置相關處理,所以作為開發(使用)者本身,往往會忽視這個過程。希望通過這篇文章,帶各位同學走進 AST,藉助 AST 發揮更多的想象力。 AST 概述 想必大家總是聽到 AST 這個概念,那麼到底什麼是 AST? AST 全稱是是 Abs

musicfe 頭像

@musicfe

昵稱 雲音樂技術團隊

@thjjames

編寫babel的插件

前言 Babel 是一個通用的多功能的 JavaScript 編譯器,讓一些新版本的語法或者語法糖可以在低版本的瀏覽器上跑起來。 它有三個主要處理步驟 Parse - Transform - Generate。 在 Transform 轉換過程中通過將插件(或預設)應用到配置文件來啓用代碼轉換。 AST 編寫 Babel 插件非常複雜,需要有相當的基礎知識,在講插件之前必須得提起 AS

thjjames 頭像

@thjjames

昵稱 小皇帝James

@guanguans

PHP-Parser 應用之掃描發現代碼中的打印、輸出結構語句

PHP-Parser 應用之掃描發現代碼中的打印、輸出結構語句 PHP-Parser 是由 nikic 開發的一個 PHP 抽象語法樹(AST)解析器,可方便的將代碼與抽象語法樹互相轉換。工程上常用來生成模板代碼(如 rector)、生成抽象語法樹進行靜態分析(如 phpstan)。最近學習應用(靜態分析)了一下,編寫了一個簡單的掃描發現代碼中的打印、輸出結構語句的命令(FindDumpState

guanguans 頭像

@guanguans

昵稱 guanguans