js基本用法

最新推荐文章于 2024-04-26 16:47:03 发布

杰克2022

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量34

点赞数

文章标签： javascript 前端开发语言 ecmascript vue.js

本文链接：https://blog.csdn.net/wyh0318/article/details/128479190

版权

<!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>

杰克2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基本用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <meta http-e...
复制链接

扫一扫