JavaScriptCore全面解析

騰訊雲加社群發表於2019-01-22
JavaScript
本文由雲+社群發表

作者：殷源，專注移動客戶端開發，微軟Imagine Cup中國區特等獎獲得者

JavaScript越來越多地出現在我們客戶端開發的視野中，從ReactNative到JSpatch，JavaScript與客戶端相結合的技術開始變得魅力無窮。本文主要講解iOS中的JavaScriptCore框架，正是它為iOS提供了執行JavaScript程式碼的能力。未來的技術日新月異，JavaScript與iOS正在碰撞出新的激情。

JavaScriptCore是JavaScript的虛擬機器，為JavaScript的執行提供底層資源。

一、JavaScript

在討論JavaScriptCore之前，我們首先必須對JavaScript有所瞭解。

1. JavaScript幹啥的？

  • 說的高大上一點：一門基於原型、函式先行的高階程式語言，通過解釋執行，是動態型別的直譯語言。是一門多正規化的語言，它支援物件導向程式設計，指令式程式設計，以及函數語言程式設計。
  • 說的通俗一點：主要用於網頁，為其提供動態互動的能力。可嵌入動態文字於HTML頁面，對瀏覽器事件作出響應，讀寫HTML元素，控制cookies等。
  • 再通俗一點：搶月餅，button.click()。（PS：請謹慎使用while迴圈）

img

2. JavaScript起源與歷史

  • 1990年底，歐洲核能研究組織（CERN）科學家Tim Berners-Lee，在網際網路的基礎上，發明了全球資訊網（World Wide Web），從此可以在網上瀏覽網頁檔案。
  • 1994年12月，Netscape 釋出了一款面向普通使用者的新一代的瀏覽器Navigator 1.0版，市場份額一舉超過90%。
  • 1995年，Netscape公司僱傭了程式設計師Brendan Eich開發這種嵌入網頁的指令碼語言。最初名字叫做Mocha，1995年9月改為LiveScript。
  • 1995年12月，Netscape公司與Sun公司達成協議，後者允許將這種語言叫做JavaScript。

3. JavaScript與ECMAScript

  • “JavaScript”是Sun公司的註冊商標，用來特製網景（現在的Mozilla）對於這門語言的實現。網景將這門語言作為標準提交給了ECMA——歐洲計算機制造協會。由於商標上的衝突，這門語言的標準版本改了一個醜陋的名字“ECMAScript”。同樣由於商標的衝突，微軟對這門語言的實現版本取了一個廣為人知的名字“Jscript”。
  • ECMAScript作為JavaScript的標準，一般認為後者是前者的實現。

4. Java和JavaScript

img

《雷鋒和雷峰塔》

Java 和 JavaScript 是兩門不同的程式語言 一般認為，當時 Netscape 之所以將 LiveScript 命名為 JavaScript，是因為 Java 是當時最流行的程式語言，帶有 “Java” 的名字有助於這門新生語言的傳播。

二、 JavaScriptCore

1. 瀏覽器演進

  • 演進完整圖

https://upload.wikimedia.org/...

  • WebKit分支

現在使用WebKit的主要兩個瀏覽器Sfari和Chromium（Chorme的開源專案）。WebKit起源於KDE的開源專案Konqueror的分支，由蘋果公司用於Sfari瀏覽器。其一條分支發展成為Chorme的核心，2013年Google在此基礎上開發了新的Blink核心。

img

2. WebKit排版引擎

webkit是sfari、chrome等瀏覽器的排版引擎，各部分架構圖如下

img

  • webkit Embedding API是browser UI與webpage進行互動的api介面；
  • platformAPI提供與底層驅動的互動， 如網路， 字型渲染， 影音檔案解碼， 渲染引擎等；
  • WebCore它實現了對文件的模型化，包括了CSS, DOM, Render等的實現；
  • JSCore是專門處理JavaScript指令碼的引擎；

3. JavaScript引擎

  • JavaScript引擎是專門處理JavaScript指令碼的虛擬機器，一般會附帶在網頁瀏覽器之中。第一個JavaScript引擎由布蘭登·艾克在網景公司開發，用於Netscape Navigator網頁瀏覽器中。JavaScriptCore就是一個JavaScript引擎。
  • 下圖是當前主要的還在開發中的JavaScript引擎

img

4. JavaScriptCore組成

JavaScriptCore主要由以下模組組成：

  • Lexer 詞法分析器，將指令碼原始碼分解成一系列的Token
  • Parser 語法分析器，處理Token並生成相應的語法樹
  • LLInt 低階直譯器，執行Parser生成的二進位制程式碼
  • Baseline JIT 基線JIT（just in time 實施編譯）
  • DFG 低延遲優化的JIT
  • FTL 高通量優化的JIT

關於更多JavaScriptCore的實現細節，參考 https://trac.webkit.org/wiki/...

5. JavaScriptCore

JavaScriptCore是一個C++實現的開源專案。使用Apple提供的JavaScriptCore框架，你可以在Objective-C或者基於C的程式中執行Javascript程式碼，也可以向JavaScript環境中插入一些自定義的物件。JavaScriptCore從iOS 7.0之後可以直接使用。

在JavaScriptCore.h中，我們可以看到這個

#ifndef JavaScriptCore_h
#define JavaScriptCore_h

#include <JavaScriptCore/JavaScript.h>
#include <JavaScriptCore/JSStringRefCF.h>

#if defined(__OBJC__) && JSC_OBJC_API_ENABLED

#import "JSContext.h"
#import "JSValue.h"
#import "JSManagedValue.h"
#import "JSVirtualMachine.h"
#import "JSExport.h"

#endif

#endif /* JavaScriptCore_h */

這裡已經很清晰地列出了JavaScriptCore的主要幾個類：

  • JSContext
  • JSValue
  • JSManagedValue
  • JSVirtualMachine
  • JSExport

接下來我們會依次講解這幾個類的用法。

6. Hello World！

這段程式碼展示瞭如何在Objective-C中執行一段JavaScript程式碼，並且獲取返回值並轉換成OC資料列印

//建立虛擬機器
JSVirtualMachine *vm = [[JSVirtualMachine alloc] init];

//建立上下文
JSContext *context = [[JSContext alloc] initWithVirtualMachine:vm];

//執行JavaScript程式碼並獲取返回值
JSValue *value = [context evaluateScript:@"1+2*3"];

//轉換成OC資料並列印
NSLog(@"value = %d", [value toInt32]);

Output

value = 7

三、 JSVirtualMachine

一個JSVirtualMachine的例項就是一個完整獨立的JavaScript的執行環境，為JavaScript的執行提供底層資源。

這個類主要用來做兩件事情：

  1. 實現併發的JavaScript執行
  2. JavaScript和Objective-C橋接物件的記憶體管理

看下標頭檔案SVirtualMachine.h裡有什麼：

NS_CLASS_AVAILABLE(10_9, 7_0)
@interface JSVirtualMachine : NSObject

/* 建立一個新的完全獨立的虛擬機器 */
(instancetype)init;

/* 對橋接物件進行記憶體管理 */
- (void)addManagedReference:(id)object withOwner:(id)owner;

/* 取消對橋接物件的記憶體管理 */
- (void)removeManagedReference:(id)object withOwner:(id)owner;

@end

每一個JavaScript上下文（JSContext物件）都歸屬於一個虛擬機器（JSVirtualMachine）。每個虛擬機器可以包含多個不同的上下文，並允許在這些不同的上下文之間傳值（JSValue物件）。

然而，每個虛擬機器都是完整且獨立的，有其獨立的堆空間和垃圾回收器（garbage collector ），GC無法處理別的虛擬機器堆中的物件，因此你不能把一個虛擬機器中建立的值傳給另一個虛擬機器。

img

執行緒和JavaScript的併發執行

JavaScriptCore API都是執行緒安全的。你可以在任意執行緒建立JSValue或者執行JS程式碼，然而，所有其他想要使用該虛擬機器的執行緒都要等待。

  • 如果想併發執行JS，需要使用多個不同的虛擬機器來實現。
  • 可以在子執行緒中執行JS程式碼。

通過下面這個demo來理解一下這個併發機制

JSContext *context = [[CustomJSContext alloc] init];
JSContext *context1 = [[CustomJSContext alloc] init];
JSContext *context2 = [[CustomJSContext alloc] initWithVirtualMachine:[context virtualMachine]];
NSLog(@"start");
dispatch_async(queue, ^{
    while (true) {
        sleep(1);
        [context evaluateScript:@"log('tick')"];
    }
});
dispatch_async(queue1, ^{
    while (true) {
        sleep(1);
        [context1 evaluateScript:@"log('tick_1')"];
    }
});
dispatch_async(queue2, ^{
    while (true) {
        sleep(1);
        [context2 evaluateScript:@"log('tick_2')"];
    }
});
[context evaluateScript:@"sleep(5)"];
NSLog(@"end");

context和context2屬於同一個虛擬機器。

context1屬於另一個虛擬機器。

三個執行緒分別非同步執行每秒1次的js log，首先會休眠1秒。

在context上執行一個休眠5秒的JS函式。

首先執行的應該是休眠5秒的JS函式，在此期間，context所處的虛擬機器上的其他呼叫都會處於等待狀態，因此tick和tick_2在前5秒都不會有執行。

而context1所處的虛擬機器仍然可以正常執行tick_1。

休眠5秒結束後，tick和tick_2才會開始執行（不保證先後順序）。

實際執行輸出的log是：

start
tick_1
tick_1
tick_1
tick_1
end
tick
tick_2

四、 JSContext

一個JSContext物件代表一個JavaScript執行環境。在native程式碼中，使用JSContext去執行JS程式碼，訪問JS中定義或者計算的值，並使JavaScript可以訪問native的物件、方法、函式。

img

1. JSContext執行JS程式碼

  • 呼叫evaluateScript函式可以執行一段top-level 的JS程式碼，並可向global物件新增函式和物件定義
  • 其返回值是JavaScript程式碼中最後一個生成的值

API Reference

NS_CLASS_AVAILABLE(10_9, 7_0)
@interface JSContext : NSObject

/* 建立一個JSContext，同時會建立一個新的JSVirtualMachine */
(instancetype)init;

/* 在指定虛擬機器上建立一個JSContext */
(instancetype)initWithVirtualMachine:
        (JSVirtualMachine*)virtualMachine;

/* 執行一段JS程式碼，返回最後生成的一個值 */
(JSValue *)evaluateScript:(NSString *)script;

/* 執行一段JS程式碼，並將sourceURL認作其原始碼URL（僅作標記用） */
- (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL*)sourceURL     NS_AVAILABLE(10_10, 8_0);

/* 獲取當前執行的JavaScript程式碼的context */
+ (JSContext *)currentContext;

/* 獲取當前執行的JavaScript function*/
+ (JSValue *)currentCallee NS_AVAILABLE(10_10, 8_0);

/* 獲取當前執行的JavaScript程式碼的this */
+ (JSValue *)currentThis;

/* Returns the arguments to the current native callback from JavaScript code.*/
+ (NSArray *)currentArguments;

/* 獲取當前context的全域性物件。WebKit中的context返回的便是WindowProxy物件*/
@property (readonly, strong) JSValue *globalObject;

@property (strong) JSValue *exception;
@property (copy) void(^exceptionHandler)(JSContext *context, JSValue
    *exception);

@property (readonly, strong) JSVirtualMachine *virtualMachine;

@property (copy) NSString *name NS_AVAILABLE(10_10, 8_0);


@end

2. JSContext訪問JS物件

一個JSContext物件對應了一個全域性物件（global object）。例如web瀏覽器中中的JSContext，其全域性物件就是window物件。在其他環境中，全域性物件也承擔了類似的角色，用來區分不同的JavaScript context的作用域。全域性變數是全域性物件的屬性，可以通過JSValue物件或者context下標的方式來訪問。

一言不合上程式碼：

JSValue *value = [context evaluateScript:@"var a = 1+2*3;"];

NSLog(@"a = %@", [context objectForKeyedSubscript:@"a"]);
NSLog(@"a = %@", [context.globalObject objectForKeyedSubscript:@"a"]);
NSLog(@"a = %@", context[@"a"]);

/
Output:

a = 7
a = 7
a = 7

這裡列出了三種訪問JavaScript物件的方法

  • 通過context的例項方法objectForKeyedSubscript
  • 通過context.globalObject的objectForKeyedSubscript例項方法
  • 通過下標方式

設定屬性也是對應的。

API Reference

/* 為JSContext提供下標訪問元素的方式 */
@interface JSContext (SubscriptSupport)

/* 首先將key轉為JSValue物件，然後使用這個值在JavaScript context的全域性物件中查詢這個名字的屬性並返回 */
(JSValue *)objectForKeyedSubscript:(id)key;

/* 首先將key轉為JSValue物件，然後用這個值在JavaScript context的全域性物件中設定這個屬性。
可使用這個方法將native中的物件或者方法橋接給JavaScript呼叫 */
(void)setObject:(id)object forKeyedSubscript:(NSObject <NSCopying>*)key;

@end



/* 例如：以下程式碼在JavaScript中建立了一個實現是Objective-C block的function */
context[@"makeNSColor"] = ^(NSDictionary *rgb){
    float r = [rgb[@"red"] floatValue];
    float g = [rgb[@"green"] floatValue];
    float b = [rgb[@"blue"] floatValue];
    return [NSColor colorWithRed:(r / 255.f) green:(g / 255.f) blue:(b / 255.f)         alpha:1.0];
};
JSValue *value = [context evaluateScript:@"makeNSColor({red:12, green:23, blue:67})"];

五、 JSValue

一個JSValue例項就是一個JavaScript值的引用。使用JSValue類在JavaScript和native程式碼之間轉換一些基本型別的資料（比如數值和字串）。你也可以使用這個類去建立包裝了自定義類的native物件的JavaScript物件，或者建立由native方法或者block實現的JavaScript函式。

每個JSValue例項都來源於一個代表JavaScript執行環境的JSContext物件，這個執行環境就包含了這個JSValue對應的值。每個JSValue物件都持有其JSContext物件的強引用，只要有任何一個與特定JSContext關聯的JSValue被持有（retain），這個JSContext就會一直存活。通過呼叫JSValue的例項方法返回的其他的JSValue物件都屬於與最始的JSValue相同的JSContext。

img

每個JSValue都通過其JSContext間接關聯了一個特定的代表執行資源基礎的JSVirtualMachine物件。你只能將一個JSValue物件傳給由相同虛擬機器管理（host）的JSValue或者JSContext的例項方法。如果嘗試把一個虛擬機器的JSValue傳給另一個虛擬機器，將會觸發一個Objective-C異常。

img

1. JSValue型別轉換

JSValue提供了一系列的方法將native與JavaScript的資料型別進行相互轉換：

img

2. NSDictionary與JS物件

NSDictionary物件以及其包含的keys與JavaScript中的對應名稱的屬性相互轉換。key所對應的值也會遞迴地進行拷貝和轉換。

[context evaluateScript:@"var color = {red:230, green:90, blue:100}"];

//js->native 給你看我的顏色
JSValue *colorValue = context[@"color"];
NSLog(@"r=%@, g=%@, b=%@", colorValue[@"red"], colorValue[@"green"], colorValue[@"blue"]);
NSDictionary *colorDic = [colorValue toDictionary];
NSLog(@"r=%@, g=%@, b=%@", colorDic[@"red"], colorDic[@"green"], colorDic[@"blue"]);

//native->js 給你點顏色看看
context[@"color"] = @{@"red":@(0), @"green":@(0), @"blue":@(0)};
[context evaluateScript:@"log('r:'+color.red+'g:'+color.green+' b:'+color.blue)"];
Output:

r=230, g=90, b=100
r=230, g=90, b=100
r:0 g:0 b:0

可見，JS中的物件可以直接轉換成Objective-C中的NSDictionary，NSDictionary傳入JavaScript也可以直接當作物件被使用。

3. NSArray與JS陣列

NSArray物件與JavaScript中的array相互轉轉。其子元素也會遞迴地進行拷貝和轉換。

[context evaluateScript:@“var friends = ['Alice','Jenny','XiaoMing']"];

//js->native 你說哪個是真愛？
JSValue *friendsValue = context[@"friends"];
NSLog(@"%@, %@, %@", friendsValue[0], friendsValue[1], friendsValue[2]);
NSArray *friendsArray = [friendsValue toArray];
NSLog(@"%@, %@, %@", friendsArray[0], friendsArray[1], friendsArray[2]);

//native->js 我覺XiaoMing和不不錯，給你再推薦個Jimmy
context[@"girlFriends"] = @[friendsArray[2], @"Jimmy"];
[context evaluateScript:@"log('girlFriends :'+girlFriends[0]+' '+girlFriends[1])"];

Output:

Alice, Jenny, XiaoMing
Alice, Jenny, XiaoMing
girlFriends : XiaoMing Jimmy

4. Block/函式和JS function

Objective-C中的block轉換成JavaScript中的function物件。引數以及返回型別使用相同的規則轉換。

將一個代表native的block或者方法的JavaScript function進行轉換將會得到那個block或方法。

其他的JavaScript函式將會被轉換為一個空的dictionary。因為JavaScript函式也是一個物件。

5. OC物件和JS物件

對於所有其他native的物件型別，JavaScriptCore都會建立一個擁有constructor原型鏈的wrapper物件，用來反映native型別的繼承關係。預設情況下，native物件的屬性和方法並不會匯出給其對應的JavaScript wrapper物件。通過JSExport協議可選擇性地匯出屬性和方法。

後面會詳細講解物件型別的轉換。

此文已由騰訊雲+社群在各渠道釋出

獲取更多新鮮技術乾貨，可以關注我們騰訊雲技術社群-雲加社群官方號及知乎機構號

相關文章