js中this到底是一个什么东西,你知道吗?

下面我们来看下,它在不同情况下分别是怎样一种形态

1.在全局作用域时:
这个是最好理解的,即在全局作用域下this指向window,也就是在全局作用域下,this与window是等价的:

console.log(this === window); //true

另外,由于在此时,this等价于window,所以我们在全局作用域声明的变量也会指向this:

var x = 1;
console.log(this.x);//1
console.log(window.x);//1

当然,我们还有另一种声明变量的方法:

x = 0;
function setNum(){
x = 1;
};
console.log(this.x);//0
setNum();
console.log(this.x);//1

当声明变量时不使用 var 或者 let的话 此时相当于给全局的this添加或者改变属性值
看起来还是很简单的,不就是个等价于window的对象么。
当然,如果仅仅是这样,this或许根本就没有存在的必要了。
而this最让人头疼的部分就是它在不同的作用域下,它的形态也是截然不同的。

2.当在函数中时:
到这里时,this的陷阱已经渐渐显露出来了
这里为什么说是当在函数中而不是局部作用域时,要讲这个,首先我们要清楚function是什么
在javascript中,function作为js中的一个特殊对象:函数,是有着不同的形态的
我们通常看到的:

function set(){
  var x = 0;
};

在这一形态下,其内部的this是与全局作用域时一样,直接指向window,所以其形态 依然等价于window。

var x = 0;
function num(){
  this.x = 1;
}
console.log(this.x);//0
num();
console.log(this.x);//1

这里就是经常容易犯得错误,很多人觉得,当this已经在一个function之中时,其目前所处位置为当前的局部作用域,所以目前指向的应该是此函数

但是,如果你将这个函数实例化(new)之后,此函数将生成一个全新的环境,此时在此实例中的this也会随之发生变化,它将指向所在实例。

num = "0";
function setThis(){
  this.num = "1";
}
console.log(this.num);//"0"
new setThis();
console.log(this.num);//"0"
console.log(new setThis().num);//1

这是因为,当实例化之后,此函数变成了一个实例对象,而其内部的this也自然而然的指向了此实例对象,如同一开始的this是指向window的对象一样指向了它所在的实例
另外,在我们写javascript的时候,我们通常还会有一种调用函数的方法,即为元素绑定事件,比如button.addEventListener(‘click’, fn, false)等,如果在fn里面需要使用到this的话,那么此时this指向事件处理元素,也就是button

注意:this作为关键字,你是无法复写它的。

不知不觉,写的也好多了,其实this还有更多的形态,比如prototype,比如在html中,比如在dom事件处理程序里,由于篇幅过长,这里就不再继续进行敖述,下回我会讲到在prototype中的this
this在我的理解中作为一个指针,相应的它在prototype原型链中会有更重要的地位,不过不在我们今天的范围之内,暂不做过多的解释
以后基本会每周一更吧,作为javascript的新手,也希望写的东西可以跟更多人分享,更希望从大家的思想中总结更多的经验!
关于JavaScript中的this到底是什么(一),每周一都会给大家更新的,作为javascript的新手,希望写的东西可以和身边的朋友分享,更希望互相交流学习经验。

    如果本内容有侵权的话,联系本人删除,谢谢!
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue.js ,你可以使用动态绑定的方式来编辑和赋值 `v-html`。 首先,在你的 Vue 组件,你需要定义一个数据属性来保存需要渲染的 HTML 内容。然后,在模板使用 `v-html` 指令,并将数据属性绑定到 `v-html` 上,这样数据变化时,渲染的 HTML 内容也会相应更新。 下面是一个示例代码: ```html <template> <div> <div v-html="dynamicHtml"></div> <button @click="updateHtml">更新HTML内容</button> </div> </template> <script> export default { data() { return { dynamicHtml: '<span style="color: blue;">初始HTML内容</span>', }; }, methods: { updateHtml() { // 在这里根据需求更新 dynamicHtml 的值 this.dynamicHtml = '<b>更新后的HTML内容</b>'; }, }, }; </script> ``` 在上面的示例,`dynamicHtml` 是一个数据属性,初始值为 `<span style="color: blue;">初始HTML内容</span>`。在模板,使用 `v-html="dynamicHtml"` 将数据属性绑定到 `v-html` 上,这样初始值会被渲染为 HTML 内容。 在 `updateHtml` 方法,你可以根据需求更新 `dynamicHtml` 的值。在示例,点击按钮时,会更新 `dynamicHtml` 的值为 `<b>更新后的HTML内容</b>`,然后模板绑定的 `v-html` 会重新渲染更新后的 HTML 内容。 通过这种方式,你可以在 Vue.js 动态编辑和赋值 `v-html` 的内容,并实现动态渲染效果。请注意,在使用动态渲染 HTML 内容时,要确保内容的安全性,以防止 XSS 攻击。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值