【JavaScript】14_this与严格模式

71 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第16天,点击查看活动详情

16、this

this

  • 函数在执行时,JS解析器每次都会传递进一个隐含的参数
  • 这个参数就叫做 this
  • this会指向一个对象
  • this所指向的对象会根据函数调用方式的不同而不同 1.以函数形式调用时,this指向的是window 2.以方法的形式调用时,this指向的是调用方法的对象 ...
  • 通过this可以在方法中引用调用方法的对象
        <script>
            function fn() {
                // console.log(this === window)
                console.log("fn打印", this)
            }
​
            const obj = { name: "孙悟空" }
            obj.test = fn
​
            const obj2 = { name: "猪八戒", test: fn }
​
            // fn()
            // window.fn()
            // obj.test() // {name:"孙悟空"}
            // obj2.test() // {name:"猪八戒", test:fn}
​
            const obj3 = {
                name: "沙和尚",
                sayHello: function () {
                    console.log(this.name)
                },
            }
            const obj4 = { 
                name: "唐僧",
                sayHello: function(){
                    console.log(this.name)
                }
            }
​
            // 为两个对象添加一个方法,可以打印自己的名字
            obj3.sayHello()
            obj4.sayHello()
        </script>

17、箭头函数的this

箭头函数:

([参数]) => 返回值

例子:

无参箭头函数:() => 返回值

一个参数的:a => 返回值

多个参数的:(a, b) => 返回值

只有一个语句的函数:() => 返回值

只返回一个对象的函数:() => ({...})

有多行语句的函数:() => {

....

return 返回值

}

箭头函数没有自己的this,它的this有外层作用域决定

箭头函数的this和它的调用方式无关

        <script>
            function fn() {
                // console.log(this === window)
                console.log("fn打印", this)
            }
​
            const obj = { name: "孙悟空" }
            obj.test = fn
​
            const obj2 = { name: "猪八戒", test: fn }
​
            const obj3 = {
                name: "沙和尚",
                sayHello: function () {
                    console.log(this.name)
                },
            }
            const obj4 = { 
                name: "唐僧",
                sayHello: function(){
                    console.log(this.name)
                }
            }
​
            // 为两个对象添加一个方法,可以打印自己的名字
            obj3.sayHello()
            obj4.sayHello()
        </script>

18、严格模式

JS运行代码的模式有两种:

正常模式

  • 默认情况下代码都运行在正常模式中, 在正常模式,语法检查并不严格 它的原则是:能不报错的地方尽量不报错
  • 这种处理方式导致代码的运行性能较差

严格模式

  • 在严格模式下,语法检查变得严格 --------> "use strict"

    1. 禁止一些语法
    2. 更容易报错
    3. 提升了性能
  • 在开发中,应该尽量使用严格模式, 这样可以将一些隐藏的问题消灭在萌芽阶段, 同时也能提升代码的运行性能

    <script>
        "use strict" // 全局的严格模式
        let a = 10
        // console.log(a)
​
        function fn(){
            "use strict" // 函数的严格的模式
        }
    </script>