综合练习题&综合实战题（1-1）

综合练习

360面试题综合练习题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var num=20;
var obj={
    num:30,
    fn:(function(num){
        this.num *=3;
        num +=15;
        var num=45;
        return function(){
            this.num *=4;
            num +=20;
            console.log(num);
        }
    })(num)//没；因为是fn的属性值
//把全局变量num的值20赋值给了自执行函数的形参，而不是obj下的30，如果想是obj下的30，我们需要些obj.num    
}
var fn=obj.fn;
fn();//-->65
obj.fn();//-->85
console.log(window.num,obj.num);//-->240、120

图形分析24

综合实战题（实现累加的多种方式）

  • [x] （推荐）利用自定义属性存储

    1
    2
    3
    4
    btn.count=0;
    btn.onclick=function(){
        spannum.innerHTML=++this.count;
    }




  • [x] 利用全局作用域不销毁的原理，把需要累加的数字定义为全局的变量
    弊端：为防止全局变量间的冲突，一般禁止或减少使用全局变量的

  • 如下

1
2
3
4
5
var count=0;
btn.onclick=function(){
    count++;
    spannum.innerHTML=count;
}




  • [x] 自己形成一个不销毁的私有作用域，来保存需要累加的数字
  • 弊端：不销毁的私有作用域，有点占内存




  • 第一种不销毁的私有作用域（函数执行返回引用数据类型、且在函数外被接收）项目中常用

    1
    2
    3
    4
    5
    6
    7
    btn.onclick=（function(){
             var count=0;
             return function(){//返回引用数据类型
                 count++;
                 spannum.innerHTML=count;
             } 
     })();

  • 第二种不销毁的私有作用域（在私有作用于下给DOM元素绑定事件）

    1
    2
    3
    4
    5
    6
    7
    ~function(){
        var count=0;
        btn.onclick=function(){
            count++;
            spannum.innerHTML=count;
        }；
    }();//自执行函数形成的私有作用域不销毁

  • [x] 利用innerHTML处理（每次点击先从页面获取最新的值，然后累加，最后把累加结果重新放回去）
    弊端：每次需要把页面内容先转化成字符串，再累加，再重新添加，当重新添加的时候浏览器都要从新渲染一下；

    1
    2
    3
    4
    5
    btn.onclick=function(){
         spannum.innerHTML++;//++默认转化成数字类型         
         //注意：innerHTML获取的是页面内容的返回字符串
         //所以spanname.innerHTML=spanname.innerHTML+1;是错误的
         };