JavaScript技巧&写法-白红宇

原文:

JavaScript技巧篇：

1》状态机

var state = function () {                this.count = 0;                this.fun = null;                this.nowcount = 0;            };                  state.prototype = {                load: function (count,fun) {                    this.count = count;                    this.fun = fun;                    this.nowcount=0;                },                trigger: function () {                    this.nowcount++;                    if (this.nowcount >= this.count){                        this.fun();                    }                }            };            //--------------             function method1() {                s.trigger();            }            function method2() {                s.trigger();            }            var s = new state();            s.load(2, function () {                console.log('执行完毕');            });            setTimeout(method1, 1000);            setTimeout(method2, 1000);

　　状态机一般用在多个任务同时进行的情况下，任务执行到某个阶段执行某个函数!

　　场景：同时请求多个异步并发执行(ajax,nodejs的io)，并处理结果集合，以上的写法最简单，但却不够优美，

　　这是我发现的至今为止最好的一js异步流程文章: ~

2》setTimeout 的特殊应用　　

var hander=setTimeout(function () { },100);clearTimeout(hander);

　　场景1》：按钮三次快速点击才触发事件　　

var num = 0;        var hander = 0;        function btnClick() {            if (hander != 0){                clearTimeout(hander);                hander = 0;            }            num++;            if (num >= 3) {                Run();                num = 0;                clearTimeout(hander);                hander = 0;            }            hander = setTimeout(function () {                num = 0;            }, 300);        }        function Run() {            console.log('Run');        }

　　场景2》：快速多次点击只触发最后一次

var hander = 0;        function btnClick() {            if (hander != 0) {                clearTimeout(hander);                hander = 0;            }            hander = setTimeout(function () {                Run();            }, 300);        }        function Run() {            console.log('Run');        }

其他(长期更新)....

JavaScript写法：

　　《. & []》

var obj = new Object();        obj.add = function (a, b) {            return a + b;        }        console.log(obj.add(1, 2));        var obj2 = new Object();        obj2['add'] = function (a, b) {            return a + b;        }        console.log(obj2.add(1, 2));

　　《prototype》最常见

var obj = function (name) {            this.name = name;        }        obj.prototype.say = function () {            console.log(this.name);        }        obj.prototype.add = function (a, b) {            return a + n;        }        var o = new obj('fuck');        o.say();        var obj = function (age) {            this.age = age;        };        obj.prototype = {            add: function (a, b) {                return this.age;            },            say: function () {                console.log('@');            }        }        var o = new obj(23333);        console.log(o.add());

　　《运行创建对象》简单闭包

var obj2 = function () {            var _name = '123';            function _add(a, b) {                return a + b+_name;            }            return {                add: _add,                name: _name            };        }();        console.log(obj2.add(1,3));

　　Object.create Object.defineProperty

var obj = function () {            this.add = function () {                console.log('add')            }        }        var outo = new obj();        var o = Object.create(outo, {            sub: {                value: function () {                    console.log('sub')                }            }        });        o.add();        o.sub();

var obj = function () {            this.add = function () {                console.log('add')            }        }        var o = new obj();        Object.defineProperty(o, {            "sub": {                value: function () {                    console.log('sub')                },                writeable: false            }        });        o.sub();

　　__proto__

var obj = function () {};        obj.prototype = {            add: function () {                console.log('add');            },            sub: function () {                console.log('sub');            }        };        var o = {};//new Object();        o.__proto__ = obj.prototype;        o.add();        o.sub();

var o = {};//new Object();        o.__proto__ = {            add: function () {                console.log('add');            },            sub: function () {                console.log('sub');            }        };        o.__proto__.go = function () {            console.log('go');        }        o.add();        o.sub();        o.go();

　　call bind

var obj = new Object();        obj.name = 'myname';        function add() {            console.log(this.name+':add');        }        add.call(obj);        var obj = new Object();        obj.name = 'myname';        function add() {            console.log(this.name + ':add');        }        var newadd = add.bind(obj);        newadd();

写在最后：

　　prototype》function的内置属性

　　__proto__》任意对象的内置属性

　　add.call(obj)》在obj对象域下执行add apply同是

　　add.bind(obj)》给add绑定一个obj对象执行域，obj对象并不会得到add，bind返回一个绑定执行域obj的函数add

　　类.add，为静态，不会被实例化

　　类.prototype.add，是修改原型，可以实例化 prototype 等价 this

　　对象.add 是为对象添加 add ，仅对象使用

　　对象.__proto__，是对象的所有属性集，

　　表达式:对象.__proto__= 某类.prototype 为原始属性完全继承，对象.__proto__=另一对象.__proto__ 为对象简单深层复制

　　表达式:对象.__proto__.add 为对象添加add或修改add，同理：对象.__proto__.add()为执行

　　同理:表达式：for (var i in o.__proto__) {console.log(o.__proto__[i])}为遍历对象属性

　　表达式：for (var i in 类.prototype ) {}为遍历类属性