js学习之杂谈

js开发中的一些小技巧

命名空间

当多人完成一个网页时，不免出现多人重复命名变量的问题。比如我的代码中定义了一个变量name，而小明的代码中也定义了一个name。为了解决这个问题，以前的方法是设定命名空间。

 var org = {
            department1 : {
                xxx : {
                    name :'xmx',
                    age : 21
                },
                yyy : {
                    name : 'ylwz',
                    age : 23
                }
            }
        };
        var xxx = org.department1.xxx;
        xxx.name = 'qwwq';

这样调用时不同空间的name变量不会相互影响。
但是，现在通常不使用这种方法，而是用闭包来解决。

var name = 'bac';
var init = (function(){
    var name = 'ced';
    function callName(){
        console.log(name);
    }
    return function(){
         callName();
    }
 }());

init()即可打印出‘ced’。

实现多个方法连续调用

当一个对象中有多个方法时，实现同时调用这些方法。

var person = {
            smoke : function(){
                console.log("Smoking");
                return this;            //重新返回这个元素,即person
            },
            drink:function(){
                console.log('Drinking');
                return this;
            },
            perm:function(){
                console.log('Perming');
                return this;
            }
        }
        deng.smoke().drink().perm();

属性拼接

当一个对象中有许多属性名相似但是又不同的属性或方法时，可以用属性拼接的方法实现对他们的统一操作。
如：

var numberList = {
            num1 :{value:1},
            num2 :{value:2},
            num3 :{value:3},
            num4 :{value:4},
            num5 :{value:5},
            sayNum : function(num){
                return this['num' + num];
            }
        };

原理是：当使用 **.**调用方法中，浏览器内部会自动转换成 **[ ]**方法。
即 obj.name都会变成 obj[‘name’].注意 **[ ]**内存放的是字符串，所以我们可以通过字符串的 + 运算实现属性拼接。

this讲解

this执行时取决于函数的执行环境。

1. 在函数预编译过程中，this指向window。
   首先回忆一下预编译过程。

function test(c){
  var a = 123;
  function b(){}
}

预编译过程中，活动对象会产生一个this，指向window。
当test为构造函数时，即new test()，this的指向会发生变化。

function test(c){
  //var this = Object.create(test.prototype);  当test产生新的实例时，this指向改变
  var a = 123;
  function b(){}
}
var test1 = new test();

2. 全局作用域里存在this指向window。
3. call或apply或bind可以改变this的指向。
   call与apply都是使用一个给定的this值和一系列参数来调用函数。
   区别在于call用的是一个或多个参数，而apply则是一个数组。

    var a ={
        name : "Cherry",
        fn : function (a,b) {
            console.log( a + b)
        }
    }
    var b = a.fn;
    b.call(a,1,2)     // 3

    var a ={
        name : "Cherry",
        fn : function (a,b) {
            console.log( a + b)
        }
    }
    var b = a.fn;
    b.apply(a,[1,2])     // 3

bind是创建一个新的函数，将this的值传入。

var a ={
        name : "Cherry",
        fn : function (a,b) {
            console.log( a + b)
        }
    }
    var b = a.fn;
    b.bind(a,1,2)()     // 3

4. obj.fun();fun()里的this指向obj。
   即谁调用的方法this就指向谁

看例题

var name = '222'；
var a = {
name : '111',
say : function (){
console.log(this.name);
}
}
var fun = a.say;
fun();  
a.say();

var b = {
name : '222',
say : function (fun){
fun();
}
b.say(a.say);
b.say = a.say;
b.say();

• fun()执行时，a.say在全局环境中，打印‘222’；
• a.say()执行时，a调用函数，打印出‘111’；
• b.say(a.say)执行，a.say作为参数被传到b中执行，这是b中没有调用a.say，它进行预编译过程，指向window。所以打印‘222’；
• b调用a中的函数say，所以this指向b，打印‘333’。