js基本用法

作者: 杰克_王_ | 来源:发表于2019-10-20 14:05 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>js基本用法</title>
    </head>
    
    <!-- 一个普通函数的冷僻属性(length、caller、arguments、name、[[Scopes]]和[[FunctionLocation]]) https://blog.csdn.net/qq_17175013/article/details/81915059 -->
    <!-- JavaScript内部属性[[Scope]]与作用域链及其性能问题 https://blog.csdn.net/q1056843325/article/details/53086893?locationNum=12&fps=1 -->
    <!-- JavaScript预编译原理分析 https://blog.csdn.net/q1056843325/article/details/52951114 -->
    <!-- JavaScript欺骗词法的eval、with与catch及其性能问题 https://blog.csdn.net/q1056843325/article/details/53106108 -->
    
    <body>
        <script>
            function func() {
                console.log(a);
                // console.log(b); // 这里会报错
                var a = 1;
                b = 2; // 变量会绑定到 window对象上
    
                console.log(a);
                console.log(b);
            }
    
            // func();
            // console.log("window.a: ", window.a); // undefined
            // console.log("window.b: ", window.b); // 2
    
            var fc = new func();
            console.log("window.a: ", window.a); // undefined
            console.log("window.b: ", window.b); // 2
        </script>
    
        <script>
            /*
            js 函数声明提升和变量声明提升
            https://blog.csdn.net/qq_33576343/article/details/81458133
            */
    
            console.log(a);
            console.log(b);
            console.log(c);
            b();
    
            var a = 1;
            function b() {
                console.log("call b function");
            }
    
            var c = function c() {
                console.log("call b function");
            }
        </script>
    
        <script>
            /*arguments 的基本用法*/
            function add() {
                console.log(arguments);
                for (i = 0; i < arguments.length; i++) {
                    console.log(arguments[i]);
                }
                console.log(Array.from(arguments));
                console.log(arguments.callee); // arguments.callee 指向函数本身
                console.log(this);
            }
    
            add(1, 2, 3, 4, 5);
        </script>
    
        <script>
            /*js字面量对象的使用*/
            var obj = {
                property: "a",
                func: function () {
                    console.log(this);
                    console.log(this.property);
                    console.log(this.func);
                }
            }
    
            console.log(obj);
            console.log(obj.property);
            console.log(obj.func);
            obj.func();
        </script>
    
        <script>
            /*函数与构造函数的区别*/
            function MyClass() {
                console.log(this);
                this.name = "jieke";
                this.age = 20;
                console.log(this);
                console.log(this.name);
            }
    
            console.log("MyClass.prototype: ", MyClass.prototype);
            console.log("MyClass.__proto__: ", MyClass.__proto__);
    
            console.log("window.name: ", window.name);
            console.log("window.age: ", window.age);
            MyClass();
            console.log("window.name: ", window.name);
            console.log("window.age: ", window.age);
    
            var mc1 = new MyClass();
            var mc2 = new MyClass();
    
            console.log("mc1 == mc2: ", mc1 == mc2);
            console.log("mc1 === mc2: ", mc1 == mc2);
    
            console.log("mc1.__proto__ === mc2.__proto__: ", mc1.__proto__ === mc2.__proto__);
        </script>
    
        <script>
            /*改变this指向*/
            function globalFunc() {
                console.log(this); // 默认指向全局对象
            }
    
            globalFunc();
            globalFunc.call({ m: "000" }); // 立即执行
            globalFunc.apply({ mk: '000' }); // 立即执行
            var func = globalFunc.bind({ mk: '000' }); // 不会立即执行
            func(); // 执行函数
        </script>
    
        <script>
            /*方法的延时调用*/
            function s12() {
                console.log("aaaaaaaa");
            }
            --setTimeout(s12, 5000);
            setTimeout('s12()', 5000);
        </script>
    
        <script>
            /*借用其它对象的方法*/
            var obj1 = {
                name: 'song',
                getName: function () {
                    console.log('----------------');
                    console.log(this.name);
                }
            }
            obj1.getName();
    
            // 借用其它对象的方法
            var obj2 = { name: "jieke" };
            obj1.getName.call(obj2);
            obj1.getName.bind(obj2)();
        </script>
    
        <script>
            // 对象元素借用
            function A1(name) {
                console.log(this);
                this.name = name;
                console.log(this);
            }
    
            function B1(name, age) {
                this.age = age;
                --A1.call(this);
                --A1.apply(this, arguments);
                A1.apply(B1, arguments);
            }
    
            var b1 = new B1('jieke', '20');
    
            function Persion() {
                console.log(this);
                this.name = "jieke";
                this.age = "20";
            }
    
            var obk = { kk: '50' };
            Persion.apply(obk);
            console.log(obk);
        </script>
    </body>
    
    </html>
    

    相关文章

      网友评论

        本文标题:js基本用法

        本文链接:https://www.haomeiwen.com/subject/vltamctx.html