Javascript > 菜鸟新人的一点小整理&积累

最新推荐文章于 2024-09-17 21:49:02 发布

wind丿ghoul

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量384

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wind_ghoul/article/details/52832348

版权

Web Workers

Web Workers是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由Web Worker运行而不冻结用户界面。Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。示例如下：

在 Web Workers 中使用 postMessage 和 onmessage

首先，需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来，参数是需要在另一个线程中运行的 JavaScript 文件名称。然后在这个实例上监听 onmessage 事件。最后另一个线程中的 JavaScript 就可以通过调用 postMessage 方法在这两个线程间传递数据了。

清单1. 主线程中创建 Worker 实例，并监听 onmessage 事件

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Test Web worker</title> 
<script type="text/JavaScript"> 
    function init(){ 
        var worker = new Worker('compute.js'); 
        //event 参数中有 data 属性，就是子线程中返回的结果数据
        worker.onmessage= function (event) { 
            // 把子线程返回的结果添加到 div 上
            document.getElementById("result").innerHTML += event.data+"<br/>"; 
        }; 
    } 
</script> 
</head> 
<body onload="init()"> 
<div id="result"></div> 
</body> 
</html>

在客户端的 compute.js 中，只是简单的重复多次加和操作，最后通过 postMessage 方法把结果返回给主线程，目的就是等待一段时间。而在这段时间内，主线程不应该被阻塞，用户可以通过拖拽浏览器，变大缩小浏览器窗口等操作测试这一现象。这个非阻塞主线程的结果就是 Web Workers 想达到的目的。

清单2. compute.js 中调用 postMessage 方法返回计算结果

var i=0; 
function timedCount(){ 
    for(var j=0,sum=0;j<100;j++){ 
        for(var i=0;i<100000000;i++){ 
            sum+=i; 
        } 
    } 
    // 调用 postMessage 向主线程发送消息
    postMessage(sum); 
} 

postMessage("Before computing,"+new Date()); 
timedCount(); 
postMessage("After computing,"+new Date());

Javascript Array 对象的常见属性及方法

属性

constructor

对象的 constructor 属性用于返回创建该对象的函数，也就是我们常说的构造函数。因此该属性并不是只有Array对象才有。

在JavaScript中，每个具有原型的对象都会自动获得constructor属性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊对象之外，其他所有的JavaScript内置对象都具备constructor属性。例如：Array、Boolean、Date、Function、Number、Object、String等。所有主流浏览器均支持该属性。

语法：object.constructor

示例如下：

<html>
<body>
<script type="text/javascript">
    function employee(name,job,born){
        this.name=name;//哈哈哈
        this.job=job;
        this.born=born;
    }
    var bill=new employee("Bill Gates","Engineer",1985);

    document.write(bill.constructor);   //打印bill的构造函数,结果如下：

    //function employee(name,job,born) { this.name=name;//哈哈哈 this.job=job; this.born=born; }

    document.write((bill.constructor === employee) + "<br/>");  //true
    document.write(("str".constructor === String) + "<br/>");   //true

</script>
</body>
</html>

可以看出它会将自己定义的构造函数的全部代码（甚至包括注释）返回回来。不过如果直接用“==”与函数名做判断，也会得到 true，同样适用于Array、String、Number等基本数据类型对应的构造函数。

下面一些具体的代码供学习（转自网络）：

// 字符串：String()
var str = "张三";
document.writeln(str.constructor); // function String() { [native code] }
document.writeln(str.constructor === String); // true

// 数组：Array()
var arr = [1, 2, 3];
document.writeln(arr.constructor); // function Array() { [native code] }
document.writeln(arr.constructor === Array); // true

// 数字：Number()
var num = 5;
document.writeln(num.constructor); // function Number() { [native code] }
document.writeln(num.constructor === Number); // true

// 自定义对象：Person()
function Person(){
    this.name = "CodePlayer";
}
var p = new Person();
document.writeln(p.constructor); // function Person(){ this.name = "CodePlayer"; }
document.writeln(p.constructor === Person); // true

// JSON对象：Object()
var o = { "name" : "张三"};
document.writeln(o.constructor); // function Object() { [native code] }
document.writeln(o.constructor === Object); // true

// 自定义函数：Function()
function foo(){
    alert("CodePlayer");
}
document.writeln(foo.constructor); // function Function() { [native code] }
document.writeln(foo.constructor === Function); // true

// 函数的原型：bar()
function bar(){
    alert("CodePlayer");
}
document.writeln(bar.prototype.constructor); // function bar(){ alert("CodePlayer"); }
document.writeln(bar.prototype.constructor === bar); // true

笔试时一些已经忘记的知识回顾

二叉树的前序中序后序遍历说的都是根节点的顺序，如前序遍历的顺序为“根节点→左叶子结点→右叶子节点”，中序遍历的顺序为“左叶子结点→根叶子节点→右叶子节点”，后序遍历的顺序为“左叶子结点→右叶子节点→根叶子节点”。因此可以从前序遍历或者后序遍历轻易得到根节点。
未指定返回值的函数返回的是一个特殊的undefined。typeof为Undefined。
对基本数据类型添加属性，属性最终会返回undefined。（即使执行了添加属性的操作，属性也不会存在）
对于储存在栈中还是堆中，可以这样理解：根据程序逻辑明确需要申请的内存，即在解析代码时知道这块内存必须申请，比如一个基本数据类型的声明和赋值：var str = “hahaha”，（即使是只声明不赋值，也应该会分配内存，因此此时应该为undefined值，如 var a;）