每天10个前端知识点：杂技

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

---

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

---

• toString() && valueOf()
• JSON stringify & parse
• +new Date()
• Array.prototype.slice.call(arguments, 0) 剖析
• JS Bridge建立Native与H5间通信
  • Hybrid通信原理
  • JS Bridge
    有些平时碰到的很零碎的东西我就随便插入到这个章节里了。

1. toString() && valueOf()

• toString() 把一个逻辑值转换为字符串，并返回结果。

• valueOf() 返回Boolean对象的原始值

源自知乎
这两个方法一般是交由JS去隐式调用，以满足不同的运算情况。

在数值运算里，会优先调用valueOf()，如a+b；
在字符串运算里，会优先调用toString()，如alert(c)。

<script>
    // 该示例来源于脚本之家
    var bbb = {
        i: 10,
        toString: function() {
            console.log('toString');
            return this.i;
        },
        valueOf: function() {
            console.log('valueOf');
            return this.i;
        }
    }

    alert(bbb); // 10 toString
    alert(+bbb); // 10 valueOf
    alert('' + bbb); // 10 valueOf
    alert(String(bbb)); // 10 toString
    alert(Number(bbb)); // 10 valueOf
    alert(bbb == '10'); // true valueOf
    alert(bbb === '10'); // false
</script>

<script>
    console.log({
        valueOf: function() {
            return 20;
        }
    } * {
        valueOf: function() {
            return 30;
        }
    });     // 600
</script>

2. JSON stringify & parse

json2.js - 引入解决IE7及以下版本JSON未定义问题。

1. JSON.stringify(object); 对象 -> 字符串 将对象字符串序列化成标准JSON字符串

eg: {a:1,b:2} -> "{"a":1,"b":2}"

2. JSON.parse(str); 字符串 -> json对象 将字符串序列化成对象

{"name":"wangchloe","age":"22"} ->

{
    age: "22",
    name: "wangchloe",
    _proto: Object
}

<a href="https://www.baidu.com/" attr1='13'>baidu.com</a>

<script>
    var oA = document.querySelector('a');
    console.log(oA.getAttribute('attr1'));  // 13

    oA.setAttribute('attr1', '14');
    var num = oA.getAttribute('attr1');

    console.log(oA.getAttribute('attr1'));  // 14
    console.log(typeof number);  // string 直接设置自定义属性只能得到string类型

    oA.setAttribute('attr1', JSON.stringify({name: 14}));

    var num2 = oA.getAttribute('attr1');

    console.log(num2);  // {"name": "14"}
    console.log(JSON.parse(num2));
    // Object {name: "14"}
    //     name: "14"
    //     -> _proto_: Object

    console.log(JSON.parse(num2).name);  // 14
    console.log(typeof JSON.parse(num2).name);  // number JSON转化得到了真正类型
</script>

3. +new Date()

<script>
    s = new Date().toString();
    // "Wed May 17 2017 11:00:16 GMT+0800 (中国标准时间)"

    t = (+new Date()).toString();
    // "1494990039861"
    // +new Date(); 等同于 new Date().getTime(); 简略写法，得到毫秒
</script>

4. Array.prototype.slice.call(arguments, 0) 剖析

将具有length属性的对象转成数组

<script>
// array.js slice的内部实现
function slice(start, end) {
    var len = ToUint32(this.length),
        result = [];
    for (var i = start; i < end; i++) {
        result.push(this[i]);
    }
    return result;
}
</script>

<script>
    // 传入arguments类数组，调用Array.prototype.slice原型方法
    // 并用call()方法，将作用域限定在arguments中
    // 这里Array.prototype就可以理解为arguments
    // 参数0为slice()方法的第一个参数，即开始位置索引，返回整个数组。
    Array.prototype.slice.call(arguments, 0);
</script>

5. JS Bridge建立Native与H5间通信

Hybrid通信原理

背景：原生APP开发中有一个webview的组件(Android中是webview,iOS7以下有UIWebview,7以上有WKWebview),这个组件可以加载Html文件。

• IOS

  • Object-C可直接调用js，只需调用stringByEvaluatingJavaScriptFromString即可，可直接获取js返回值。
  • js不可直接调用Object-C，利用 shouldStartLoadWithRequest，需拦截每个url，对指定的schema进行拦截做相应的本地方法。

• Android

  • Java可直接调用js，但不可直接获取js返回值。
  • Java注册addJavascriptInterface 后，js可直接调用Native的接口，并获取Native的返回值。让Java跟Javascript更加亲密
  • 通过 shouldOverrideUrlLoading，也还是拦截Web的所有URL请求来达到通信的目的。

基础通信存在以下问题

• Android4.2以下,addJavascriptInterface方式有安全漏洞

• iOS7以下,js无法调用Native

JS Bridge

• url scheme交互方式是一套现有的成熟方案，可以完美兼容各种版本，不存在上述问题。

通过JSBridge(JS和Native通信机制),H5页面可以调用Native的api,Native也可调用H5页面的方法或者通知H5页面回调。

微信公众号：无媛无故