前端开发javascript-this指向【清晰】

前端开发javascript|javascript前端开发|前端开发者
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>web前端开发技术——html_css_javascript</title>
<style type=”text/css”>
.click {
color: #ff6900;
}
</style>
</head>
//在学全局作用域中this的指向之前，你需要了解window对象，因为全局作用的this指向的是window对象

// window对象

//console.log(window)
//全局作用域 window，它是一个对象， 也叫做全局对象，window对象给我们提供了很多方法和对象，也就是js语言内置的方法和对象都是定义在了window对象上
//比如：
//我们常见的window自身的属性有 innerWidth-内宽,innerHeight-内高,outerWidth-外宽,outerHeight-外高
//我们常用的方法有alert() setTimeout() setInterval() confirm()
//我们常用的对象有 console,JSON，Math，Object，location,
//我们常用的构造函数有：Object(),String(),Number(),Array(),Date(),formData()
//我们常用的事件有：onclick, onmouseover, onmouseleave, onmousedown, onmouseup, onkeydown, onkeyup, onchange, oninput, ondrag, onresize

//我们调用window对象上的方法的时候可以不加window，也可加上
//window.console.log(window.innerWidth)
//window.alert('sdsfsdf')

var a = 'H5-14期'//window对象上会添加一个属性a
var b = {//window对象上会添加一个对象b
    Class: "14期"
}
var c = [1, 2, 3, 4, 5, 6]//window对象上会添加一个数组
//console.log(window.a)
//console.log(window.b)
//console.log(window.c)

function test() {//window对象上会添加一个test()方法
    console.log('test')
}
//window.test()

function Haha() {//window对象上会添加一个构造函数Haha()
    this.name = 'haha'
}

//在全局作用域内，我们实例化对象的时候可以在构造函数前加window
var obj = new window.Object({
    name: "aaaaaaa"
})
//console.log(window.obj.name)

//我们也可以这样添加一个全局变量，也就是给window对象添加一个属性
//但是通常我们不这样做，因为别人看我们的项目的时候不易理解，所以我们要用var声明一个变量
this.hwthwthwt = 'hwthwthwthwt'

//我们声明的全局变量、常量、全局函数、构造函数实际上是给window对象添加属性,
//所以在我们使用变量、调用函数、实例化对象的时候实际上是window在调用它们，
//通常我们会省略window，使用变量、调用函数的时候不用window打点调用，因为我们所有代码都是在window对象里面，
//window就相当于一个容器，我们就站在window里面，我们不可能在window对象外面调用它的属性

//但是在我们使用我们自定义的对象的时候是在它外面调用它的属性的，所以要用对象名打点调用它的属性
//比如：
var d = {
    text: "你好"
}
//console.log(d.text)

//下面我总结了js中this的指向，在不改变this指向的情况下，this的指向分为了四种情况，分别是：

//1，在全局作用域内this的指向

var aa = 'hello'
//console.log(window.aa)
//console.log(this.aa)
//在全局作用内，这里的this指向的是window，所以我们可以用this调用全局变量
//但是通常在全局作用域内我们不用this和window调用全局变量和全局函数

function add() {
    console.log(this)
}
//this.add()
//window.add()
//因为全局作用域的函数是被window调用的，所以在全局作用域的函数里的this指向的是window
//同样我们也可以用this调用全局作用域的函数，但是通常不会这样做

window.setTimeout(function() {
    //console.log(this)
}, 2000)
//setTimeout()也是被window调用的，而且setTimeout()中的第一个参数function(){}也是window调用的，
//所以function里面的this也是指向window
//setInterval()中的this也是指向window

function hwt() {
    console.log(this)

    function hwt1() {
        console.log(this)
    }
    return hwt1
}
//var hwt1 = hwt()
//hwt1()

//我们可以写成这样
//var hwt1 = window.hwt()
//window.hwt1()

//hwt()是被window调用的，所以它里面的this指向window
//hwt1()也是被window调用的，所以它里面的this也是指向window
//总结：只要是被window调用的函数，函数中的this都是指向window

//2，在事件监听函数内this的指向

var btn = document.querySelector('#btn')

btn.onclick = function(event) {
    console.log(event.target)
    console.log(btn)
    //事件对象event中的target属性是一个对象，就是触发该事件的目标元素，在这里event.target就是btn
    //event.target对象上有一个onclick()方法，btn触发onclick事件的时候，event.target就会调用onclick()
    //所以onclick()方法中的this指的是event.target,也就是btn
}
//btn.onclick = function(){} 这段代码是给btn添加一个onclick()方法,btn触发onclick事件的时候就会执行该方法
//在事件监听函数里的this指的是触发该事件的元素

btn.onmouseover = function() {
    //console.log(this)
    //这个函数是被btn调用的，所以在这里，this指的是btn

    window.setTimeout(function() {
        //console.log(this)
        //这个函数是被window调用的，所以这里的this指的是window
        this.className = 'setTimeout'
    }, 1000)
}

//3, 对象中函数里的this

var obj = {
    func: function() {
        console.log(this)
        //func()是被对象obj调用的，所以func()中的this指的是对象obj
    },
    obj1: {
        func1: function() {
            console.log(this)
            //func1()是被对象obj1调用的，所以func1()中的this指的是对象obj1
        }
    }
}
obj.func()
obj.obj1.func1()

//如果一个对象里的属性是个函数，这个函数中的this指的就是这个对象

//4, 构造函数里的this

function Man() {
    this.isMale = true
    this.getThis = function() {
        console.log(this)
    }
}

var man = new Man()//用构造函数Man()实例化一个对象man,对象man也就拥有了getThis()方法
man.getThis()
//因为getThis()方法是被man对象调用的，所以getThis()中的this是指向对象man的。

function Class() {
    this.className = '14期'
    this.getClassName = function() {
        console.log(this.className)
        //在className()方法中this指向的是构造函数Class()的实例对象，
        //所以输出的this.className的值是： '14期'

        window.setTimeout(function(){
            console.log(this.className)
            //在setTimeout()中，this指的是window对象，因为window对象上没有className这个属性
            //所以输出的是：undefined
        },3000)
    }
}

var cls = new Class()
cls.getClassName()

//总结：在不改变this指向的情况下，方法中的this指的是调用该方法的对象

//用call(),apply(),bind()可以改变this的指向，所以js中this的指向是不确定的，要看情况而定
//关于改变this的指向我会再给大家总结一下
</script>
</html>
javascript前端开发实用技术教程|javascript jquery 交互式web前端开发|web前端开发
前端开发javascript-this指向【清晰】

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发
