iOS源码补完计划--JavaScriptCore原理探究


从时间线来看、前端交互分为三个阶段。

本帖不是用法教学贴

主要针对JavaScriptCore工作原理进行探究

首先、借助一套JSC开源源码(地址)。我们可以更直观的解析JSC。

JS调用OC

一个最简单的注册调用
  • oc
  - (void)configMyJSCore {
  
      //设置js环境
      JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
      self.context = context;    
      
      self.context[@"Log"] = ^(NSString *msg){
          NSLog(@"%@",msg);
      };
  }
  • js
<body>
    <h1>WebViewJavascriptBridge Demo</h1>
    <button type="button"  onclick="JSCallOC1()">JS调用OC方法1</button>
</body>
<script type="text/javascript">
    function JSCallOC1 () {
        Log('JSCallOC1');
    }
</script>

点击button打印:

2018-01-10 15:18:47.687046+0800 test[10151:397569] JSCallOC1

那么、一行一行看呗。

self.context[@"Log"] = ^(NSString *msg){
      NSLog(@"%@",msg);
};

JSContext是啥。字典么？肯定不是。
但是在JSContext.h文件中。有这样两个方法。

@interface JSContext (SubscriptSupport)

/*!
@method
@abstract Get a particular property on the global object.
@result The JSValue for the global object's property.
*/
- (JSValue *)objectForKeyedSubscript:(id)key;

/*!
@method
@abstract Set a particular property on the global object.
*/
- (void)setObject:(id)object forKeyedSubscript:(NSObject <NSCopying> *)key;

@end

在全局对象上设置一个属性、以及获得一个属性。看着有点意思、把上面的代码换成这个写法试试。

[self.context setObject:^(NSString *msg){
        NSLog(@"%@",msg);
} forKeyedSubscript:@"Log"];

一切正常。于是、源码出场。

- (JSValue *)objectForKeyedSubscript:(id)key
{
    return [self globalObject][key];
}

- (void)setObject:(id)object forKeyedSubscript:(NSObject <NSCopying> *)key
{
    [self globalObject][key] = object;
}

里面对[self globalObject]对象的某属性进行了一次赋值/取值。

  • globalObject是什么呢

从文档可以看出、是window对象(如果没有window也代表一个作用域)。

源码中

- (JSValue *)globalObject
{
    return [JSValue valueWithJSValueRef:JSContextGetGlobalObject(m_context) inContext:self];
}

/*!
@method
@abstract Creates a JSValue, wrapping its C API counterpart.
@param value
@param context
@result The Objective-C API equivalent of the specified JSValueRef.
*/
+ (JSValue *)valueWithJSValueRef:(JSValueRef)value inContext:(JSContext *)context;

该方法在某个Context作用域中、查询并返回一个包装成JSValue的JS对象。
这里、就是在self.context的作用于中、查找并返回了一个GlobalObject对象。
具体一点、在oc和js中分别打印：

//oc中
NSLog(@"oc---%@",[self.context globalObject]);
//js中
Log('js---'+window);

结果：

test[10409:454602] oc---[object Window]
test[10409:454752] js---[object Window]

进一步确认是不是同一个window?

//oc中
JSValue * document = [[self.context globalObject]objectForKeyedSubscript:@"document"];
NSString * title = [[document objectForKeyedSubscript:@"title"] toString];
NSLog(@"oc---%@",title);
//js中
Log('js---'+window.document.title);

结果:

test[10473:462274] oc---页面title
test[10473:462411] js---页面title

一模一样。

所以。刚才提到的:

里面对[self globalObject]对象的某属性进行了一次赋值/取值。

实际上就是对html的window对象的某属性进行了赋值/取值。
而H5中window对象的属性是什么、就是顶层变量、也叫全局变量。

window.property = '顶层变量';
alert(property);
WechatIMG240.jpeg

再深入一些、这个属性如何被添加的呢？

***JSValue.h***
- (void)setValue:(id)value forProperty:(NSString *)property;
 
***JSValue.m***
***
* Sets the value of the named property in the JavaScript object value.
* Calling this method is equivalent to using the subscript operator with a string subscript in JavaScript. Use it to set or create fields or properties in JavaScript objects.
  Parameters    
***
- (void)setValue:(id)value forProperty:(NSString *)propertyName
{
    JSValueRef exception = 0;
    JSObjectRef object = JSValueToObject([_context     JSGlobalContextRef], m_value, &exception);
    if (exception) {
        [_context notifyException:exception];
        return;
    }
    //通过nsstr创建一个jsstr
    JSStringRef name = JSStringCreateWithCFString((CFStringRef)propertyName);
    JSObjectSetProperty([_context JSGlobalContextRef], object, name, objectToValue(_context, value), 0, &exception);
    JSStringRelease(name);
    if (exception) {
        [_context notifyException:exception];
        return;
    }
}

方法的解释大概翻译是

  调用此方法相当于在JavaScript中使用子脚本操作符。使用它来设置或创建JavaScript对象中的字段或属性。

再具体一点：

void JSObjectSetProperty(JSContextRef ctx, JSObjectRef object, JSStringRef propertyName, JSValueRef value, JSPropertyAttributes     attributes, JSValueRef* exception)
{
    if (!ctx) {
        ASSERT_NOT_REACHED();
        return;
    }
    ExecState* exec = toJS(ctx);
    APIEntryShim entryShim(exec);

    JSObject* jsObject = toJS(object);
    Identifier name(propertyName->identifier(&exec->vm()));
    //将oc绑定的方法转化成js对象
    JSValue jsValue = toJS(exec, value);

    if (attributes && !jsObject->hasProperty(exec, name)) {
        PropertyDescriptor desc(jsValue, attributes);
        jsObject->methodTable()->defineOwnProperty(jsObject, exec, name, desc, false);
    } else {
        PutPropertySlot slot(jsObject);
        //向被注入的对象的methodTable中存入该方法、说明、名字等参数。
        jsObject->methodTable()->put(jsObject, exec, name, jsValue, slot);
    }

    if (exec->hadException()) {
        if (exception)
            *exception = toRef(exec, exec->exception());
        exec->clearException();
    }
}

将oc注册的方法、转化成js对象后、存入被注入对象的方法table中(忽然感觉很想runtime的机制了~)。

OC调用JS

本质上都是这个方法：

JSValue *value1 = [self.jsContext evaluateScript:@"hello()"];

***JSContext.h***
/*!
@methodgroup Evaluating Scripts
*/
/*!
@method
@abstract Evaluate a string of JavaScript code.
@param script A string containing the JavaScript code to evaluate.
@result The last value generated by the script.
*/
- (JSValue *)evaluateScript:(NSString *)script;
作用：尝试执行一段js代码。

在具体一点的代码：

***JSBase.cpp***
JSValueRef JSEvaluateScript(JSContextRef ctx, JSStringRef script, JSObjectRef thisObject, JSStringRef sourceURL, int startingLineNumber, JSValueRef* exception)
{
    if (!ctx) {
        ASSERT_NOT_REACHED();
        return 0;
    }
    ExecState* exec = toJS(ctx);
    APIEntryShim entryShim(exec);

    JSObject* jsThisObject = toJS(thisObject);

    // evaluate sets "this" to the global object if it is NULL
    JSGlobalObject* globalObject = exec->vmEntryGlobalObject();
    SourceCode source = makeSource(script->string(), sourceURL->string(), TextPosition(OrdinalNumber::fromOneBasedInt(startingLineNumber), OrdinalNumber::first()));

    JSValue evaluationException;
    JSValue returnValue = evaluate(globalObject->globalExec(), source, jsThisObject, &evaluationException);

    if (evaluationException) {
        if (exception)
            *exception = toRef(exec, evaluationException);
        return 0;
    }

    if (returnValue)
        return toRef(exec, returnValue);

    // happens, for example, when the only statement is an empty (';') statement
    return toRef(exec, jsUndefined());
}
***completion.cpp***
JSValue evaluate(ExecState* exec, const SourceCode& source, JSValue thisValue, JSValue* returnedException)
{
    JSLockHolder lock(exec);
    RELEASE_ASSERT(exec->vm().identifierTable == wtfThreadData().currentIdentifierTable());
    RELEASE_ASSERT(!exec->vm().isCollectorBusy());

    CodeProfiling profile(source);

    ProgramExecutable* program = ProgramExecutable::create(exec, source);
    if (!program) {
        if (returnedException)
            *returnedException = exec->vm().exception();

        exec->vm().clearException();
        return jsUndefined();
    }

    if (!thisValue || thisValue.isUndefinedOrNull())
        thisValue = exec->vmEntryGlobalObject();
    JSObject* thisObj = jsCast<JSObject*>(thisValue.toThis(exec, NotStrictMode));
    JSValue result = exec->interpreter()->execute(program, exec, thisObj);

    if (exec->hadException()) {
        if (returnedException)
            *returnedException = exec->exception();

        exec->clearException();
        return jsUndefined();
    }

    RELEASE_ASSERT(result);
    return result;
}

}

讲道理翻到这我已经没啥耐心逐字逐句的撸了~毕竟这个开源包是不能运行的。
简单概括一下：

  • 通过上下文获取JS全局对象。
  • 将全局对象、JS代码（转换成JsStr之后）等。交由虚拟机进行搜索并获得上下文中可执行列表。
  • 执行可执行列表获得返回值。（具体的执行代码可以自己去源码里挑战一下）

由于源码的包直接从开源的WebKit中获取。缺少项目文件、无法进行编译。
所以并不保证这篇文章具有100%的正确性。
只是因为网上没找到源码解析相关的帖子、又很好奇。只能自己动手。
如有错误、还望指正。

最后

本文主要是自己的学习与总结。如果文内存在纰漏、万望留言斧正。如果不吝赐教小弟更加感谢。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,847评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,208评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,587评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,942评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,332评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,587评论 1赞 218
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,853评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,568评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,273评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,373评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,031评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2赞 269