发表于: 2020-02-17 22:43:18

1 1494


今天完成的事情:学习了js的this 关键字
明天计划的事情:继续学习js的后续内容
遇到的问题:内感到有些晦涩,需要加强练习
收获:首先学习了this 关键字

this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。例如

<h2>JavaScript <b>this</b> 关键字</h2>

<p>实例中,<b>this</b> 指向了 <b>person</b> 对象。</p>
<p>因为 person 对象是 fullName 方法的所有者。</p>

<p id="demo"></p>

<script>
    // 创建一个对象
    var person = {
        firstName: "John",
        lastName: "Doe",
        id: 5566,
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    };

    // 显示对象的数据
    document.getElementById("demo").innerHTML = person.fullName();
</script>

运行结果


在对象方法中, this 指向调用它所在方法的对象。

比如刚刚就是this 表示 person 对象。

如果单独使用 this,则它指向全局(Global)对象。

在浏览器中,window 就是该全局对象为 [object Window],如

<h2>JavaScript <b>this</b> 关键字</h2>

<p>实例中,<b>this</b> 指向了 window 对象:</p>

<p id="demo"></p>

<script>
    var x = this;
    document.getElementById("demo").innerHTML = x;
</script>

运行结果


也可以在函数中使用 this(默认),如

<h2>JavaScript <b>this</b> 关键字</h2>

<p>实例中,<b>this</b> 表示 myFunction 函数的所有者:</p>

<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = myFunction();
    function myFunction() {
        return this;
    }
</script>

运行结果

在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:如

<h2>JavaScript <b>this</b> 关键字</h2>

<button onclick="this.style.display='none'">点我后我就消失了</button>

运行结果

点击

也可以在对象方法中绑定,如

<h2>JavaScript <b>this</b> 关键字</h2>

<p>在实例中,<b>this</b> 指向了 fullName 方法所属的对象 person。</p>

<p id="demo"></p>

<script>
    // 创建一个对象
    var person = {
        firstName: "John",
        lastName: "Doe",
        id: 5566,
        myFunction: function () {
            return this;
        }
    };

    // 显示表单数据
    document.getElementById("demo").innerHTML = person.myFunction();
</script>

运行结果

在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。比如

<h2>JavaScript this 关键字</h2>
<p>实例中 <strong>this</strong> 指向了 person2,即便它是 person1 的方法:</p>

<p id="demo"></p>

<script>
    var person1 = {
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    }
    var person2 = {
        firstName: "John",
        lastName: "Doe",
    }
    var x = person1.fullName.call(person2);
    document.getElementById("demo").innerHTML = x
</script>

运行结果

还学习了let 和 const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

全局变量

在函数外声明的变量作用域是全局的:例如

<p>全局变量在任何脚本和函数内均可访问。</p>
<p id="demo"></p>
<script>
    var carName = "Volvo";
    myFunction();
    function myFunction() {
        document.getElementById("demo").innerHTML =
            "我可以显示 " + carName;
    }
</script>

运行结果

局部变量

在函数内声明的变量作用域是局部的(函数内):例如

<p>局部变量在声明的函数外不可以访问。</p>
<p id="demo"></p>
<script>
    myFunction();
    document.getElementById("demo").innerHTML = "carName 的类型是:" + typeof carName;
    function myFunction() {
        var carName = "Volvo";
    }
</script>

运行结果

重新定义变量

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量:比如

<h2>使用 var 声明变量</h2>

<p id="demo"></p>

<script>
    var x = 10;
    // 这里输出 x 为 10
    {
        var x = 2;
        // 这里输出 x 为 2
    }
    // 这里输出 x 为 2
    document.getElementById("demo").innerHTML = x;
</script>

运行结果

let 关键字就可以解决这个问题,因为它只在 let 命令所在的代码块 {} 内有效。

实测

<h2>使用 let 声明变量</h2>

<p id="demo"></p>

<script>
    var x = 10;
    // 这里输出 x 为 10
    {
        let x = 2;
        // 这里输出 x 为 2
    }
    // 这里输出 x 为 10
    document.getElementById("demo").innerHTML = x;
</script>

运行结果

const 关键字

const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:

<h2>JavaScript const</h2>

<p>const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改。</p>

<p id="demo"></p>

<script>
    try {
        const PI = 3.141592653589793;
        PI = 3.14;
    }
    catch (err) {
        document.getElementById("demo").innerHTML = err;
    }
</script>

运行结果

const定义常量与使用let 定义的变量相似:

1.二者都是块级作用域

2.都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:

1.const声明的常量必须初始化,而let声明的变量不用

2.const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。

关于这一块的内容很多还没有理解透彻,明天继续看看



返回列表 返回列表
评论

    分享到