记性不好，笔头来凑-JS篇

三座大山

原型与原型链

隐式原型

每个对象都有一个proto属性，指向创建该对象的函数的prototype。

prototype-1

检测类型

判断一个变量是不是对象非常简单。值类型的类型判断用typeof，引用类型的类型判断用instanceof。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 基本类型
console.log(typeof x); // undefined
console.log(typeof 10); // number
console.log(typeof 'abc'); // string
console.log(typeof true); // boolean
console.log(typeof null); // 调用typeof null会返回"kobject"，因为特殊值null被认为是一个空的对象引用。
console.log(typeof function () {});  //function
console.log(typeof [1, 'a', true]);  //object
console.log(typeof { a: 10, b: 20 });  //object
console.log(typeof new Number(10));  //object
console.log(person instanceof Object); // 变量person是Object吗? 
console.log(colors instanceof Array); // 变量colors是Array吗? 
console.log(pattern instanceof RegExp); // 变量pattern是RegExp吗?

其中A instanceof B判断的原理是，沿着A的__proto__这条线来找，同时沿着B的prototype这条线来找，如果两条线能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false。
这就是应用了隐式原型的原理。

原型链

访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着proto这条链向上找，这就是原型链。

执行环境与作用域

每个函数都有自己的执行环境。当执行刘进入一个函数时，函数的环境就会被推入一个环境占中。而在函数执行后，栈将其环境弹出，把控制权返回给之前的执行环境，

当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域的前端，始终都是当前执行代码所在环境的变量对象。下一个变量对象来自外部环境，再下一个变量对象来自下一个外部环境。

异步

单线程

JavaScript是单线程语言，HTML5提出Web Worker标准，利用多核CPU的计算能力，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

任务队列

具体来说，异步执行的运行机制如下（同步执行也是如此，因为它可以被视为没有异步任务的异步执行）。

  1. 所有同步任务都在主线程上执行，形成一个执行栈。
  2. 主线程之外，还存在一个”任务队列”。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
  3. 一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
  4. 主线程不断重复上面的第三步。
    async-1

  • 补充1：定时器
    如果将setTimeout()的第二个参数设为0，就表示当前代码执行完（执行栈清空）以后，立即执行（0毫秒间隔）指定的回调函数。总之，setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。
    它在”任务队列”的尾部添加一个事件，因此要等到同步任务和”任务队列”现有的事件都处理完，才会得到执行。

  • 补充2：问题解决
    一般遇到异步的问题都会在操作上进行优化。

传递参数

ECMAScript 中所有函数的参数都是按值传递的。即使在函数内部修改了参数的值，但原始的引用仍然保持未变。实际上，当在函数内部重写obj时，这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁。

1
2
3
4
5
6
7
8
function setName(obj) { 
    obj.name = "Nicholas"; 
    obj = new Object(); 
    obj.name = "Greg";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"

没有块级作用域

1
2
3
4
if (true) {
    var color = "blue";
}
alert(color); // "blue"

这里是在一个if语句中定义了变量color。如果是在C、C++或Java中，color会在if语句执 行完毕后被销毁。但在JavaScript中，if语句中的变量声明会将变量添加到当前的执行环境(在这里是 全局环境)中。

垃圾收集

标记清除

当变量进入环境(例如，在函数中声明一个变量)时，就将这个变量标记为“进入环境”。而当变量离开环境时，则将其标记为“离开环境”。

引用计数

当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。
而此种方法会存在循环引用的问题。

检测数组

1
2
3
if (Array.isArray(value)){ 
    //对数组执行某些操作
}

数组操作方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var colors = new Array();
/*
 *  栈方法
 */
// push把参数逐个添加到数组末尾 并返回修改后数组的长度
alert(colors.push("red", "green", "blue")); // 3
// pop从数组末尾移除最后一项 并返回移除的项
alert(colors.pop()); // blue
/*
 *  队列方法
 */
// shift移除数组中的第一个项 并返回该项
alert(colors.shift()); // red
// unshift能在数组前端添加任意个项 并返回新数组的长度
alert(colors.unshift("grey", "black")); // 3
/*
 *  操作方法
 */
// concat会先创建当前数组一个副本 然后将接收到的参数添加到这个副本的末尾 最后返回新构建的数组
var colors = ["red", "green", "blue"];
alert(colors.concat("yellow", ["black", "brown"]); // red,green,blue,yellow,black,brown
alert(colors); // red,green,blue
// slice可以接受一或两个参数 即要返回项的起始和结束位置
var colors = ["red", "green", "blue", "yellow", "purple"];
alert(colors.slice(1)); // green,blue,yellow,purple
alert(colors.slice(1,4)); // green,blue,yellow
alert(colors); // red,green,blue,yellow,purple 
// splice主要用途是向数组的中部插入项
var colors = ["red", "green", "blue"];
alert(colors.splice(0, 1)); // red 返回的数组中只包含一项
alert(colors); // green,blue 
alert(colors.splice(1, 0, "yellow", "orange")); // 返回的是一个空数组
alert(colors); // green,yellow,orange,blue 
alert(1, 1, "red", "purple")); // yellow，返回的数组中只包含一项 
alert(colors); // green,red,purple,orange,blue

字符串操作方法

slice和substring的第二个参数指定的是子字符串最后一个字符后面的位置，而substr的第二个参数指定的则是返回的字符个数。

1
2
3
4
5
6
7
var stringValue = "hello world";
alert(stringValue.slice(3)); // "lo world"
alert(stringValue.substring(3)); // "lo world"
alert(stringValue.substr(3)); // "lo world"
alert(stringValue.slice(3, 7)); // "lo w"
alert(stringValue.substring(3, 7)); // "lo w"
alert(stringValue.substr(3, 7)); //"lo worl"

在传递给这些方法的参数是负值的情况下，slice会将传入的负值与字符串的长度相加，substr将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0，substring会把所有负值参数都转换为0。

1
2
3
4
5
6
7
var stringValue = "hello world";
alert(stringValue.slice(-3)); // "rld"
alert(stringValue.substring(-3)); // "hello world"
alert(stringValue.substr(-3)); // "rld"
alert(stringValue.slice(3, -4)); // "lo w"
alert(stringValue.substring(3, -4)); // "hel"
alert(stringValue.substr(3, -4)); // ""

hasOwnProperty & in

hasOwnProperty只在属性存在于实例中时才返回true，in则在属性存在于实例还是原型中时都返回true。因此同时使用hasOwnProperty和in，就可以确定该属性到底是存在于对象中，还是存在于原型中。

1
2
3
function hasPrototypeProperty(object, name){
    return !object.hasOwnProperty(name) && (name in object);
}

new一个对象的过程

1、创建一个新对象；
2、this指向这个对象；
3、执行代码，即给this赋值；
4、返回this。

继承

原型链继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function() {
    return this.property;
};
function SubType(){
    this.subproperty = false;
}
// 继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
    return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true

问题：

  • 来自原型对象的引用属性是所有实例共享的
  • 在创建子类型的实例时，不能向超类型的构造函数中传递参数

借用构造函数

1
2
3
4
5
6
7
8
9
10
11
12
function SuperType() {
    this.colors = ["red", "blue", "green"];
}
function SubType() {
    // 继承了 SuperType 此处可传递参数
    SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); // "red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); // "red,blue,green"

问题：方法都定义在构造函数，影响函数复用。

组合继承

使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
};
function SubType(name, age){
    // 继承属性 
    SuperType.call(this, name);
    this.age = age;
}
//继承方法
SubType.prototype = new SuperType(); 
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){
    alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); // "red,blue,green,black"
instance1.sayName(); // "Nicholas";
instance1.sayAge(); // 29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); // "red,blue,green"
instance2.sayName(); // "Greg";
instance2.sayAge(); // 27

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为JavaScript中最常用的继承模式。
问题：会调用两次超类型构造函数：一次是在创建子类型原型的时候；另一次是在子类型构造函数内部。

原型式继承

借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

1
2
3
4
5
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}

ECMAScript5通过新增Object.create()方法规范化了原型式继承。

1
2
3
4
5
6
7
8
9
10
var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person, {
    name: {
        value: "Greg"
    }
}); // 第二个参数可选
alert(anotherPerson.name); //"Greg"

问题：包含引用类型值的属性会共享相应的值，就像使用原型模式一样。

寄生式继承

1
2
3
4
5
6
7
function createAnother(original){ 
    var clone = object(original); // 通过调用函数创建一个新对象
    clone.sayHi = function(){ // 以某种方式来增强这个对象
        alert("hi"); 
    };
    return clone; // 返回这个对象
}

寄生组合式继承

所谓寄生组合式是，使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); // 创建对象
    prototype.constructor = subType; // 增强对象
    subType.prototype = prototype; // 指定对象
}
function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
};
function SubType(name, age){
    SuperType.call(this, name);
    this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
    alert(this.age);
};

这个例子的高效率体现在它只调用了一次SuperType构造函数，因此避免了在SubType.prototype上面创建不必要的、多余的属性。
开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。
闭包直接引用element，会导致DOM对象的引用无法解除，因此有必要把element变量设置为null。

1
2
3
4
5
6
7
8
function assignHandler(){
    var element = document.getElementById("someElement"); 
    var id = element.id;
    element.onclick = function(){
        alert(id);
    };
    element = null;
}

减少全局变量污染

只创建一个唯一的全局变量。

1
2
3
4
5
6
7
var MYAPP = {};
MYAPP.variaties = {
    // ...
}
MYAPP.funcs = {
    // ...
}

使用模块

模块模式的一般形式是：一个定义了私有变量和函数的函数；利用闭包创建可以访问私有变量的和函数的特权函数；最后返回这个特权函数，或者把它们保存到一个可访问到的地方。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var serial_maker = function () {
    var prefix = '';
    var seq = 0;
    return {
        set_prefix: function (p) {
            prefix = String(p);
        },
        set_seq: function (s) {
            seq = s;
        },
        gensym: function () {
            var result = prefix + seq;
            seq += 1;
            return result;
        }
    };
}();

利用匿名函数

1
2
3
4
5
6
7
8
(function(){
    var exp = {};
    var name = 'jack';
    exp.method = function(){
        return name;
    }
    window.ex = exp;
})();

BOM

获取页面视口大小

1
2
3
4
5
6
7
8
9
10
11
var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
    if (document.compatMode == "CSS1Compat"){ // 确定页面是否处于标准模式
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

间歇调用和超时调用

一般认为，使用超时调用(setTimeOut)来模拟间歇调用(setInterval)是一种最佳模式，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。

1
2
3
4
5
6
7
8
9
10
11
12
var num = 0;
var max = 10;
function incrementNumber() {
    num++;
    // 如果执行次数未达到max设定的值，则设置另一次超时调用
    if (num < max) {
        setTimeout(incrementNumber, 500);
    } else {
        alert("Done");
    }
}
setTimeout(incrementNumber, 500);

DOM

DocumentFragment类型

假设我们想为一个ul元素添加三个列表项，可以使用一个文档片段来保存创建的列表项，然后再一次性将它们添加到文档中。

1
2
3
4
5
6
7
8
9
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i=0; i < 3; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item " + (i+1)));
    fragment.appendChild(li);
}
ul.appendChild(fragment);

previousElementSibling & previousSibling

1
2
3
4
5
6
7
8
9
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
<script>
var o = document.getElementById("div2").previousSibling;
var p = document.getElementById("div2").previousElementSibling;
console.log(o);
console.log(p);
</script>

Node.js

单线程

Node.js 采用了单线程模型，它不会为每个接入请求分配一个线程，而是用一个主线程处理所有的请求，然后对 I/O 操作进行异步处理，避开了创建、销毁线程以及在线程间切换所需的开销和复杂性。

CPU密集型任务

  • 分给子线程（Web Worker）
  • cluster模块

常用小方法

常用正则

匹配url

1
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/
regexper-1

匹配数字

1
var parse_number = /^-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?$/i
regexper-1

参考

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

喜欢音乐 看书 旅行<br>偶尔玩设计<br>以及 只爱写JS的程序媛一枚