JavaScript经典案例

案例1、点击以li 输出对应的数字

    

        
1
        
2
        
3
        
4
        
5
    

复制代码

案例2、call 和apply

function Compute() {
    this.plus = function (a, b) {
        console.log(a+b)
    }
    this.minus = function (a, b) { 
       console.log(a - b)
    }
}
function FullCompute() {
    Compute.apply(this)   //或者  Compute.call(this)
    this.mul = function (a, b) {
        console.log(a*b)
    }
    this.div = function (a, b) {
        console.log(a / b)
    }
}
var compute = new FullCompute()
compute.plus(1, 2)
compute.mul(1, 2)
compute.div(1, 2)
compute.minus(1, 2)复制代码

案例3、css圣杯模式，圣杯布局

 
"wrap">
    
"top">
    
"main clearfix">
        
"left">123
        
"content">234
fdsaf
        
"right">345
    
    
"foot">
复制代码

案例4、call apply

function foo(){

    bar.apply(null,arguments);

}

function bar(){

    console.log(arguments);

}

foo(1,2,3,4,5);        //打印[1，2，3，4，5]

案例5、JS的typeof可能返回的值有哪些？

object(null)/boolean/number/string/undefined/function

案例6

function b(x,y,a){

    arguments[2] = 10;

    alert(a);   //10

    a = 10;

    alert(arguments[2]);   //10

}

b(1,2,3)

案例7、逗号运算

var f = (

      function f(){

            return '1';

      },

     function g(){

           return 2;

     }

);

console.log(typeof(f))    //function   解析：f = (f(),g()),其实f就等于g()

那么

var f = (

function f(){

return '1';

},

function g(){

return 2;

}

)();

console.log(typeof(f)) // number

案例8

console.log(undefined == null)       //true

console.log(undefined === null)      //false

console.log(isNaN('100'))        //false   解析：isNaN会隐式类型转换 var num = Number('100')

console.log(parseInt('1a') == 1 )     //true   解析：parseInt从头看数字，直到看到非数

function isNaN1（num）{

       var res = Number(num) + '';

      if(res == 'NaN){

             return true

      }else  {

              return false

      }

}

console.log(isNaN1('123));    //false

{} == {}   //false    引用值比较的是地址，他们地址不同  如何让他们相等

var obj = {}

var obj1 = obj    这样就相等了

var a = 5;

function test(){

      a = 0;

      console.log(a);

     console.log(this.a);

      var a;

      console.log(a)

}

test();    //0 5 0

new test()   //0 undefined 0

案例9、打印斐波那契数列的第N位/打印一个参数值以内能被3或5或7整除的数

复制代码

案例10、插件标配写法：

;(function () {
    var Test = function () {
     
    }
    Test.prototype = {}
    window.Test = Test;
})();复制代码

案例11、笔试题this指向

var name = '222';
var a = {
    name : '111',
    say: function () {
        console.log(this.name)
    }
}
var fun = a.say;
fun();  //222
a.say();//111
var b = {
    name: '333',
    say: function (fun) {
        fun()
    }
}
b.say(a.say); //222
b.say = a.say;  
b.say()   //333复制代码

案例12、GO/AO

a = 1;
function test(e) {
    function e() {}
    arguments[0] = 2;
    console.log(e);    //2
    if (a){
        var b = 3;
    }
    var c;
    a = 4;
    var a;
    console.log(b);   //undefined
    f = 5;
    console.log(c);   //undefined
    console.log(a);    //4
}
var a;
test(1);
console.log(a);  //1
console.log(f);   //5复制代码

转载于:https://juejin.im/post/5b727ef5f265da27f949062b