前端基础题

最新推荐文章于 2023-12-03 23:03:23 发布

Mrs索莱尔

最新推荐文章于 2023-12-03 23:03:23 发布

阅读量355

点赞数

分类专栏： web前端文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_29895699/article/details/52712939

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js异步加载点击打开链接

this，作用域，变量声明提升和闭包

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //立即执行函数等价于
//        (function(){alert(1);})();
//        var fn = function(){alert(1);};
//        fn();


        //闭包，this,变量声明提升，，，，return只执行return综合题
        var number = 2;
        var obj1 = {
            number: 4,
            fn1: (function(){
                this.number *= 5;//10
                alert("angfajfn"+this.number);
                number *= 7;
                alert(number);
//                var number = 3;
//                    return function(){
//                        alert(this);
//                        this.number *= 2;
//                        number *= 3;
//                        console.log(number);
//                    };
                var string = "nfiafalej4famwek";
                return string+number;
            } )()
        };
        var fn1 = obj1.fn1;
        alert(this.number);
        alert(fn1);//angfajfn5
//        console.log(number);//10
//        console.log("obj "+obj1.number);//obj4
//        fn1();//只执行return语句，在这里就是闭包//9
//        obj1.fn1();//
//        console.log(window.number);
//        console.log(obj1.number);
//



        //闭包，this综合题
//        var number = 2;
//        var obj1 = {
//            number: 4,
//            fn1: (function(){
//                this.number *= 5;
//                number *= 2; //函数中的变量是被预解释的，已经分配内存空间了，undefined
//                //看有没有被定义（先看有没有被定义，不看有没有被赋值），没被定义则为undefined，alert这行输出位NaN
//                var number = 3; //这里
//                return function(){
//                    this.number *= 2;  //运行的时候才能知道this执向的是谁
//                    number *= 3;        //在78行被定义
//                    alert(number);
//                };//fn1最终结果就是这个函数
//            } )()
//        };
//        var fn2 = obj.fn1;
//        alert(number);  //10, obj.fn1在定义的时候便被执行了, this.number = 2*5 = 10
//        fn2();      //9，直接运行就是那个闭包方法，没有  .  （即没有主体对象）也就是闭包里的this指window
//        //this.number就是Window下的number  ，10*2 = 20
//        //number就是闭包里的，3*3 = 9
//        //        obj.fn1;//这个属性保存了匿名函数返回的那个函数的地址，不能被销毁
//        obj1.fn1();//9
//        //this指向obj，this.number = obj.number = 4*2 = 8
//        alert(window.number);//20
//        alert(obj1.number);//8
    </script>
</head>
<body>

</body>
</html>

事件绑定，普通事件

阻止事件冒泡

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //事件冒泡和事件绑定
        window.onload = function(){
            document.body.onclick = function(){
                alert('baby');
                stopBubble(e);
            };
            document.getElementById('clickMe').onclick = function(e){
                alert('hello');
                stopBubble(e);
            };
            document.getElementById("a").onclick = function(e){
//                stopDefault(e);
//                stopBubble(e);
            };
        };
        function stopDefault(e){        //a
            if(e&& e.preventDefault()){
                e.preventDefault();
            }else{
                window.even.returnValue = false;   //	如果设置了该属性，它的值比事件句柄的返回值优先级高。
                // 把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
            }
        }
        function stopBubble(e){ //button
            if(e && e.stopPropagation()){
                e.stopPropagation();
            }else{
                window.event.cancleBubble = true;   //如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
            }
        }

    </script>
</head>
<body>
<div style="width:100px;height:100px;background-color:red;">
    <button type="button" id="button2">没绑定</button>
    <button id="clickMe">绑定</button>
    <a id="a" href="bibao.html" οnclick=''>如果要阻止默认事件的触发，即默认的href事件，那么就需要调用如下函数：</a>
</div>

</body>
</html>

字符串

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        arr = [];
        arr2 = arr.concat([1,2,3,4,5]);
        alert(arr2);

        //找出字符串中出现最多的字母
        var str = "we are foundery electronic company.do.LTD ";
        var objArr = [];
        for(var i = 0; i < str.length; i++ ){
            var key = str[i];
            if(!objArr[key]){
                objArr[key] = 1;
            }else{
                objArr[key] ++;
            }
        }
        var max = -1;
        var index;
        for(var j in objArr){
            if(max < objArr[j]){
                max = objArr[j];
                index = j;
            }
        }
        console.log(index+"为出现最多的字母，出现的次数为"+max);
        //将字符串大于等于5的字符逆序输出
        var str1 = "Hello 58 company";
        var arr = str1.split(" ");//分割成hello,58,company
//        var arr = str1.split(""); //分割成h,e,l,l,o, ,5,8, ,c,o,m,p,a,n,y
//        alert(arr.reverse());//数组的逆序
        var fiveArr = [];
        for(var i in arr){
            if(arr[i].length >= 5){
                fiveArr[i] = arr[i].split("").reverse(); //h,e,l,l,o--->o,l,l,e,h
            }else{
                fiveArr[i] = arr[i];
            }
        }
       for(var j in fiveArr){
           console.log(fiveArr[j]);
       }


        //隐式类型转换
        //(1)四则运算 +  将数字转换为string   - 将string转化为number
        //(2)判断语句 if，while转换为boolean   for in 定义对象字面量时从标识符到string的隐式类型转换
        var person = {'name':'jack',age:20,school:'PKU'};
        for(var a in person){
            console.log(a + ": " + typeof a);//school为string
        }
        var ary = [1,3,5,7];
        for(var a in ary){
            console.log(a + ": " + typeof a);//数组的索引也是字符串类型
        }
        //(3)alert时，native代码调用
        String.prototype.fn = function(){
            return this;    //this当前类的实例对象
        };
        var b = 'hello';
        console.log(typeof b.fn()); //object
        console.log(b.fn()); //hello
        //强制类型转换
        //（1）parseInt,parseFloat只对string类型有效
        //(2)Number(),String(),Boolean()
        console.log(Number(undefined));//NaN
        console.log(Number(null));//0
        console.log(Number(new Object()));//NaN
        console.log(Boolean(new Object()));//true

        var n = 1;
        function f17(){

            n = 2;
        }
        f17();
        console.log(n);



    </script>
</head>

</body>
</html>

作用域

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //while{…}、if{…}、for(..) 之内的都是全局变量（除非本身包含在function内）。
        var f = true;
        if(f === true){
            var a = 10;
        }
        function fn() {
            var b = 20;
            c = 30;
        }
        fn();
        console.log(a);
        //        console.log(b);//报错
        console.log(c);

//        函数声明优于变量声明
        function fn1(a) {
            console.log(a);
            var a = 2;
            function a() {}
            console.log(a);
        }
        fn1(2);


        //作用域
        var a = 60;
        function f(){
            var a = 79;
            console.log("局部变量："+a);
            return function(){
                console.log(this.a);
            }
        }
        a = 40;
        var b = f();
        b();

        function test(){
            console.log(this);        //window对象
        }
        var obj = function(){
            var name='testObj';
        };
        obj.objTest = test;
        obj.objTest2 = function(){
            test();
        };
        test();
        obj.objTest();
        obj.objTest2();//输出window对象

    </script>


</head>
<body>

</body>
</html>