每天一个前端知识（32）:编写高质量JS代码

(0.1 + 0.2) + 0.3;     // 0.6000000000000001
0.1 + (0.2 + 0.3);     // 0.6

var obj = {
    toString: function(){
        return '[object MyObject]';
    },
    valueOf: function(){
        return 17;
    }
}

'object:' + obj;  // "object:17"
1 + obj;  // 18

'hello'.name = 'my name is hello';
'hello'.name

"1.0e0" == {valueOf: function(){ return true; }};  // true

"\u221a" === √

function swap(a, i, j){
   temp = a[i];  // global
   a[i] = a[j];
   a[j] = temp;
}

function makeSandwich(){
       var magicIngredient = 'peanut butter';
       function make(filling){
	          return magicIngredient + " and " + filling;
       }
       return make('jelly');
}
makeSandwich(); // "peanut butter and jelly"

function makeSandwich(){
        return function (filling){
            return magicIngredient + " and " + filling;
        }
}

function  box(){
        var val = undefined;
        return {
             set: function(newVal){ val = newVal;},
             get: function(){ return val; },
             type: function(){ return typeof val;}
        };
}

var b = box();
b.type(); //"undefined"
b.set(98.6);
b.get();  // 98.6
b.type();  // "number"

function test(){
    var x = "var", result = [];
    result.push(x);
    try{
        throw 'expection';
    } catch(x){
        x = 'catch';
    }
    result.push(x);
    return result;
}
test(); // ["var", "var"]

function wrapElements(a) {
       var result = [], i, n;  // 分配三个槽
       for(i = 0, n = a.length; i < n; i++){
           result[i] = function(){  // 闭包,a[i]存储的是引用,i共享一个槽
               return a[i];
           }
       }
       return result;
}

var wrapped = wrapElements([10, 20, 30, 40, 50]);
var f = wrapped[0];

function wrapElements(a) {
    var result = [], i, n;
    for(i = 0, n = a.length; i < n; i++){
        (function(){
            var j = i;
            result[i] = function(){
                return a[j];
            }
        })();
        /**
        (function(j){
            result[i] = function(){
                return a[j];
            }
        })(i);
        **/
    }
    return result;
}
var wrapped = wrapElements([10, 20, 30, 40, 50]);
var f = wrapped[0];

var f = function double(x){ return x*2; }
// 此语句将该函数绑定到变量f而不是变量double

function f(){ return 'global'; }
function test(x){
    var result = [];
    if(x){
        function f(){
            return 'local';
        }
        result.push(f());
    }
    result.push(f());
    return result;
}
test(true);
test(false);

function f(){ return 'global'; }
function test(x){
    var g = f;
    var result = [];
    if(x){
        g = function f(){
            return 'local';
        }
        result.push(g());
    }
    result.push(g());
    return result;
}
test(true);
test(false);

function test(x){
       eval('var y = x;')
       return y;
}
test('hello'); // hello

// 直接调用
var x = 'global';
function test(){
    var x = 'local';
    return eval('x');  // 'local'
}
test();
// 间接调用
var x = 'global';
function test(){
    var x = 'local';
    var f = eval;
    return f('x');  // global
}
test();

function hello(userName){

}
hello('pl');  // "hello,pl"

var obj = {
    hello: function(){
        return 'hello,' + this.userName;
    },
    userName: 'pl'
}
obj.hello(); // "hello,pl"
var obj2 = {
    hello: obj.hello,
    userName: 'rabbit'
};
obj2.hello();  // "hello,rabbit"

function hello(){
    // 'use strict';
    console.log(this);
    return "hello," + this.userName;
}
hello();

// 使用英文字母创建一些字符串
var aIndex = "a".charCodeAt(0);
var alphabet = "";
for(var i = 0; i < 26; i++){
    alphabet += String.fromCharCode(aIndex + i);
}
alphabet; //"abcdefghijklmnopqrstuvwxyz"
// 生成一个包含数字的字符串
var digits = "";
for(var i = 0; i < 10; i++){
    digits += i;
}
digits;  // "0123456789"
// 创建一个随机的字符串
var aIndex = "a".charCodeAt(0);
var random = "";
for(var i=0; i<8; i++){
   random += String.fromCharCode(Math.floor(Math.random() * 26) + aIndex);
}
random;  //"uraugvrx"
// 上面三种，都是创建一个字符串，只是创建的方式不同
function buildString(n, callback){
       var result = "";
       for(var i=0; i<n; i++){
	          result = callback(i);
       }
       return result;
}

obj.temporary = f;
var result = obj.temporary(arg1, arg2, arg3);
delete obj.temporary;
// 使用call
f.call(obj, arg1, arg2, arg3);

function callMethod(obj, method){
    var shift = [].shift;
    console.log(arguments);
    shift.call(arguments);
    shift.call(arguments);
    console.log(obj);
    console.log(method);
    return obj[method].apply(obj, arguments);
}
var obj = {
    add: function(x, y){return x + y;}
};
callMethod(obj, 'add', 17, 29);

function strict(x){
    "use strict";
    arguments[0] = "modified";
    return x === arguments[0];
}
function nonstrict(x){
    arguments[0] = 'modified';
    return x === arguments[0];
}
strict("unmodified"); // false
nonstrict('unmodified'); // true

function values(){
    var i = 0, n = arguments.length;
//  var args = [].slice.call(arguments, 0);
    return {
        hasNext: function(){
            return i < n;
        },
        next: function(){
            if( i >= n ){
                throw  new Error('end of iteration');
            }
            return arguments[i++];
        // return args[i++];
        }
    }
}
var it = values(1, 4, 1, 4, 2, 1, 3, 5, 6);
it.next();

function simpleURL(protocol, domain, path){
    return protocol + '://' + domain + '/' + path;
}
var urls = paths.map(function (path) {
    return simpleURL('http', siteDomain, path);  // 第一个和第二个参数固定
});
// 使用bind实现函数柯里化
var urls = paths.map(simpleURL.bind(null, 'http', siteDomain));

// User看成一个类,User函数给该类提供了一个公告的构造函数,
// 而User.prototype是实例之间共享方法的一个内部实现
function User(name, password){
   	    this.name = name;
   	    this.password = password;
}
User.prototype.toString = function(){
    return "[User "  + this.name + "]";
};
User.prototype.checkPassword = function(password){
    return password === this.password;
};
var user = new User('admin', 'root');

if(typeof Object.getPrototypeOf === 'undefined'){
       Object.getPrototypeOf = function(obj){
	      var t = typeof obj;
	      if(!obj || (t !== 'object' && t !== 'function')){
	 	        throw new TypeError('not an object');
	      }
	      return obj.__proto__;
       }  
}

function User(name, password){
   //   "use strict";
   	    this.name = name;
   	    this.password = password;
}   
var user = User('admin', 'root');
user;    // undefined
name;   //"admin"
password; // "root"

function User(name, password){
    if(!(this instanceof User)){
        return new User(name, password);
    }
    this.name = name;
    this.password = password;
}
// 该函数需要额外的函数调用，代价有点高，并且它很难适用于可变参数函数
function User(name, password){
    var self = this instanceof User ? this : Object.create(User.prototype);
    self.name = name;
    self.password = password;
    return self;
}   

- Object.create兼容函数

// 简单参数版本
if(typeof Object.create === "undefined"){
    Object.create = function(prototype){
        function C(){};
        C.prototype = prototype;
        return new C();
    }
}

- JavaScript允许表达式的结果可以被构造函数中的显示return语句所覆盖
-  当一个函数期望使用new操作符调用时,清晰地文档化该函数。

function User(name, password){
    this.name = name;
    this.password = password;
    this.toString = function(){
        return "[User "  + this.name + "]";
    };
    this.checkPassword = function(password){
        return password === this.password;
    };
}

function User(name, password){
    this.toString = function(){
        return "[User "  + name + "]";
    };
    this.checkPassword = function(password){
        return password === password;
    };
}
// 缺点: 这些方法必须置于实例对象中

function Tree(x){
    this.value = x;
}
Tree.prototype = {
    children: [],
    addChild: function(x){
        this.children.push(x);
    }
};
var left = new Tree(2);
left.addChild(1);
left.addChild(3);
var right = new Tree(6);
right.addChild(5);
right.addChild(7);
right.children;  //[1, 3, 5, 7]
left.children;  //[1, 3, 5, 7]

if(typeof Array.prototype.map !== 'function'){
    Array.prototype.map = function(f, thisArg){
        var result = [];
        for(var i = 0; i < thisArg.length; i++){
            result[i] = f.call(thisArg, this[i], i);
        }
        return result;
    }
}

function NaiveDict(){}
NaiveDict.prototype.count = function(){
    var i = 0;
    for(var name in this){
        i++;
        console.log(name)
    }
    return i;
};
NaiveDict.prototype.toString = function(){
    return "[object NaiveDict]";
};
var dict = new NaiveDict();
dict.alice = 34;
dict.bob = 24;
dict.chris = 62;
dict.count();

- 将Object的直接实例作为字典，而不是其子类，当然也不是数组
    - 所有人都不应当增加属性到Object.prototype中，因为这样做可能会污染for…in循环，但是增加属性到Array.prototype中是合理的

var dict = {};
dict.alice = 34;
dict.bob = 24;
dict.chris = 62;
var names = [];
for(var name in dict){
    names.push(name);
}
names;

var x = Object.create(null);
Object.getPrototypeOf(x) === null;  // true
// 使用__proto__
var o = {__proto__: null};
o instanceof Object; // false

var hasOwn = Object.prototype.hasOwnProperty;
// 更加简明
var hasOwn = {}.hasOwnProperty;

function Dict(elements){
    this.elements = elements || {};
}
Dict.prototype.has = function(key){
    return {}.hasOwnProperty.call(this.elements, key);
};
Dict.prototype.get = function (key) {
    return this.has(key) ? this.elements[key] : undefined;
};
Dict.prototype.set = function(key, val){
    this.elements[key] = val;
};
Dict.prototype.remove = function (key) {
    delete this.elements[key];
};

var ratings = {
    "Good Will Hunting": 0.8,
    "Mystic River": 0.7,
    "21": 0.6,
    "Doubt": 0.9
};
var total = 0, count = 0;
for(var key in ratings){
    total += ratings[key];
    count++;
}
total /= count;
console.log(total);  // 0.7499999999999999
(0.8 + 0.7 + 0.6 + 0.9)/4;   // 0.75

function Member(name) {
    this.name = name;
    this.friends = [];
}
var a = new Member('Alice'),
    b = new Member('Bob'),
    c = new Member('Carol'),
    d = new Member('Dieter'),
    e = new Member('Eli'),
    f = new Member('Fatima');
a.friends.push(b);
b.friends.push(c);
c.friends.push(e);
d.friends.push(b);
e.friends.push(d,f);
Member.prototype.inNetwork = function(other){
    var visited = {};
    var workset = {};
    workset[this.name] = this;
    for(name in workset){
        var member = workset[name];
        delete workset[name];
        if(name in visited){
            continue;
        }
        visited[name] = member;
        if(member === other) {
            return true;
        }
        member.friends.forEach(function(friend){
            workset[friend.name] = friend;
        });
    }
    return false;
};
a.inNetwork(f);

Member.prototype.inNetwork = function(other){
    var visited = {};
    var workset = [this];
    while(workset.length > 0){
        var member = workset.pop();
        console.log(member);
        if(member.name in visited){
            continue;
        }
        visited[member.name] = member;
        if(member === other) {
            return true;
        }
        member.friends.forEach(function(friend){
            workset.push(friend);
        });
    }
    return false;
};
a.inNetwork(f);

var str = 'abcdef';
var result = [].map.call(str, function(s){
    return s.toUpperCase();
});
result;  //["A", "B", "C", "D", "E", "F"]

var arrayLike = {'0':'a', '1':'C', length:2};
var result = [].map.call(arrayLike, function(s){
    return s.toUpperCase();
})

element.highlight(undefined); //use a random color
element.highlight('random'); //use a random color

function Server(port, hostname){
    if(arguments.length < 2){
        hostname = 'localhost';
    }
    // hostname = String(hostname || 'localhost');
    hostname = String(hostname);
    console.log(hostname);
    // ...
}
var hostname;
var port = 8080;
Server(port, hostname);

function escapeBasicHTML(str){
   	return str.replace(/&/g, "&")
               .replace(/</g, "&lt;")
               .replace(/>/g, "&gt;")
               .replace(/"/g, "&quot;")
               .replace(/'/g, "&apos;")
}
var html = '<span class="vote-count">175</span>'
escapeBasicHTML(html);

$('#notification')     // 查找notification元素
    .html('Server not responding.')   // 设置notification消息
    .removeClass('info')    // 移除设置样式
    .addClass('error')    // 添加样式 ### 并发

function downloadOneSync(urls){
    for(var i = 0; n = urls.length; i++){
        try{
            return downloadSync(urls[i]);
        }catch(e){}
    }
    throw new Error('all downloads failed');
}
// 以上使用循环，会启动所有下载

function downloadOneSync(urls, onsuccess, onerror){
    var n = urls.length;
    function tryNextURL(i){
        if(i >= n){
            onerror('all downloads failed');
            return;
        }
        downloadSync(urls[i], onsuccess, function(){
            tryNextURL(i + 1);
        });
    }
    tryNextURL(0);
}

function downloadAllAsync(urls, onsuccess, onerror){
    var result = [], length = urls.length;
    if(length === 0){
        setTimeout(onsuccess.bind(null, result), 0);
        return;
    }
    urls.forEach(function(url){
        downloadSync(url, function(text){
            if(result){
                result.push(text);
                if(result.length === urls.length){
                    onsuccess(result);
                }
            }
        }, function(error){
            if(result){
                result = null;
                onerror(error);
            }
        })
    });
}
// 以上代码异步的启动文件下载，当文件下载完成就会将中间结果保存在result数组的末尾，因此保存下载文件内容的数组的顺序是未知的，因此调用者无法找出哪个结果对应哪个文件

function downloadAllAsync(urls, onsuccess, onerror){
   var result = [], pending = urls.length;
   if(pending === 0){
       setTimeout(onsuccess.bind(null, result), 0);
       return;
   }
   urls.forEach(function(url, i){
       downloadSync(url, function(text){
           if(result){
               result[i] = text;  //存储在固定index
               pending--;
               if(pending === 0){
                   onsuccess(result);
               }
           }
       }, function(error){
           if(result){
               result = null;
               onerror(error);
           }
       })
   });
}

var cache = new Dict();
function downloadCachingAsync(url, onsuccess, onerror){
    if(cache.has(url)){
        onsuccess(cache.get(url));  // 同步调用
        // var cached = cache.get(url);
        // setTimeout(onsuccess.bind(null, cached), 0);  // 异步调用
        return;
    }
    return downloadAsync(url, function(file){
        cache.set(url, file);
        onsuccess(file);
    }, onerror);
}