this指向

此处this指向btn 所以 this.content 为 undefined

  1.         function Test() {
  2.             this.oBtn = document.getElementsByClassName('J_btn')[0];
  3.             this.oText = document.getElementsByClassName('J_text');
  4.             this.content = '234';
  5.         }
  6.         Test.prototype = {
  7.             init: function () {
  8.                 this.bindEvent();
  9.             },
  10.             bindEvent: function () {
  11.                 this.oBtn.addEventListener('click', this.textChange, false);
  12.             },
  13.             textChange: function () {
  14.                 var content = this.content;
  15.                 // 此处this指向btn 所以 this.content 为 undefined
  16.                 console.log(this, this.content);
  17.             }
  18.         }
  19.         new Test().init();

image.png

更改this指向

注意：bind不会执行对应的函数，call或apply会自动执行对应的函数

call

image.png

bind

image.png

        function Test() {
            this.oBtn = document.getElementsByClassName('J_btn')[0];
            this.oText = document.getElementsByClassName('J_text')[0];
            this.content = '234';
        }
        Test.prototype = {
            init: function () {
                this.bindEvent();
            },
            bindEvent: function () {
                this.oBtn.addEventListener('click', this.textChange.bind(this), false);
            },
            textChange: function () {
                var content = this.content;
                // 此处this绑定Test 所以 this.content 为 234
                console.log(this, this.content);
            }
        }
        new Test().init();

image.png

函数式编程

优点：易读 易维护
概念：函数是第一类对象，不依赖任何其他对象独立存在

纯函数
相同的输入得到相同的输入，不依赖且不影响外部环境也不产生任何副作用
输出玩去取决于输入

副作用：只要跟函数外部环境发生了交互就是副作用
发送数据请求 改变数据 console.log DOM操作 数组存储

        var arr1 = ['a', 'b', 'c', 'd', 'e'],
            arr2 = ['a', 'b', 'c', 'd', 'e'];

        var spArr = arr1.splice(0, 3), // 副作用 :会改变原数组
            slArr = arr2.slice(0, 3); // 无副作用 :不会改变原数组

        console.log(arr1);
        console.log(spArr);
        console.log(arr2);
        console.log(slArr);

image.png

纯函数vs非纯函数

非纯函数

test不是纯函数 test函数的CRUD对obj的原始数据有影响

        var obj = {
            a: 1,
            b: 2,
            c: 3
        }
        function test(obj) {
            obj.d = 4;
            return obj;
        }

image.png

纯函数

test是纯函数 test函数的CRUD不会对obj的原始数据有影响

写法一

        var obj = {
            a: 1,
            b: 2,
            c: 3
        }
        function test(obj, deepClone) {
            var newObj = deepClone(obj, {});
            newObj.d = 4;
            return newObj;
        }

        function deepClone(org, tar) {
            var tar = tar || {},
                toStr = Object.prototype.toString,
                arrType = ['object Array'];
            for (var key in org) {
                if (org.hasOwnProperty(key)) {
                    if (typeof (org[key]) === 'object' && org[key] !== null) {
                        tar[key] = toStr.call(org[key]) === arrType ? [] : {};
                        deepClone(org[key], tar[key]);
                    } else {
                        tar[key] = org[key];
                    }
                }
            }
            return tar;
        }
        console.log(test(obj, deepClone), obj);

写法二

        var obj = {
            a: 1,
            b: 2,
            c: 3
        }
        function test(obj) {
            var newObj = deepClone(obj, {});
            newObj.d = 4;
            return newObj;
            function deepClone(org, tar) {
                var tar = tar || {},
                    toStr = Object.prototype.toString,
                    arrType = ['object Array'];
                for (var key in org) {
                    if (org.hasOwnProperty(key)) {
                        if (typeof (org[key]) === 'object' && org[key] !== null) {
                            tar[key] = toStr.call(org[key]) === arrType ? [] : {};
                            deepClone(org[key], tar[key]);
                        } else {
                            tar[key] = org[key];
                        }
                    }
                }
                return tar;
            }
        }

image.png