JS基础系列-聊聊this

JavaScript034

JS基础系列-聊聊this,第1张

面向对象编程中，我们经常要和this打交道。而对于函数中this到底指向哪里，对刚开始接触JavaScript的我们，经常会分不清楚。

我们必须明确的是函数中this的指向 不是固定 的，和函数执行时的环境有关，简单的说，我们可以理解函数中this指向的是 当前调用该函数的对象 ，所以我们也针对以下几种情况来消化下这种说话。

1、作为函数调用时

简单的例子如下：

在浏览器时执行该代码时，打印出来的都是window对象。

因为作为函数调用时，默认是被认为在全局对象中调用该函数（nodejs环境中是global对象） 注：不是在当前函数所处的作用域对象

有一点需要注意的是， 箭头函数 （我们等等再特殊讲下）

2、作为对象方法调用时

简单的例子如下

代码执行时，答应出来的是obj对象，name值是obj，这是满足我们的预期：函数目前就是作为obj的方法被调用，所以调用该函数的对象是obj。

这种情况我们很容易消化，但是换了一种情况就另当别论，如

这个时候打印出来的window对象，name值是test[what][what]

原来这个时候fn指向的是一个函数 （不是指向 obj执行logThis 这个行为） ，fn调用就是调用一个函数，也就是第一种情况，所以上面的例子就如下：

3、作为构造函数执行

简单的例子如下

这个时候打印出来的是我们新生成的people对象。

因为构造函数执行的过程我们可以简单理解为

1、新生成一个对象（people）

2、该对象原型对象指向构造函数的prototype对象(People.prototype)

3、通过新生成的对象调用构造函数（可以简单理解为People.call(this)）

4、作为箭头函数调用

简单例子如下

这个时候打印的我们可能因为都是window对象，然而结果打脸了，第一个打印的是window对象，第二个打印的是obj对象[发怒]

原来箭头函数， 不会生成新的this指向 ，箭头函数在哪个环境执行，指向的就是当前环境的this对象，也就是第二种情况下，this指向的obj.logThis()执行时的this指向（前面我们提到的是obj对象）

5、apply，call，bind调用

this的指针默认指向就是上面提到的4种，但是总有需求，我们想要自定义this指向，这个时候apply，call，bind这3个方法就排的上用场

这三个方法都是函数对象自身的方法，第一个参数支持传入的是函数调用时设置的this对象，如

这个时候第一个打印的是window对象（看1说明），第二个打印的是obj对象（我们通过传参的方法明确说明函数执行是的this对象是obj）

而这三个方法，不同如下

上述总结希望对大家有用[作揖]

原生js操作网页

emmm

添加网页元素

移除网页元素

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    div{

        border: 1px solid black

        width: 100px

        height: 100px

        text-align: center

    }

</style>

<body>

<div>div1</div>

<div>div2</div>

<script>

    var div = document.createElement("div")

    div.innerText = "这是使用js添加的元素"

    //添加一个div元素

 document.body.appendChild(div)

    alert("3秒后移除div1")

    //移除html元素

 setTimeout(function () {

        var divList = document.getElementsByTagName("div")

        divList[0].remove()

    },3000)

</script>

</body>

</html>

这两个很基础，其实所有其他js库（jquery之类的）能做的事情原生js都能做。

main.html做个导航栏，right.html做radiobutton的五个input type="text"，left.html做textbox的五个，用iframe将right和left放到所需位置，设置visibility为hidden，点击后用JS改变其值为visible，保存的实现用sample.js，就是改变这些input的defaultValue为输入的内容