分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

js中this的指向

发布时间:2023-09-06 02:02责任编辑:彭小芳关键词:js
window是js中的全局对象,我们创建的变量实际上是给window添加属性
this的最终指向的是那个调用它的对象

1.全局作用域或者普通函数中this指向全局对象window

未设定全局值

<script> ???function foo(){ ??????var name=‘ruby‘; ??????alert(this.name) ?//undefined ???} ???foo(); ???console.log(this); ?//window</script>window中没name这个属性,因此找不到

设定管全局值

<script> ??var name=‘jerd‘; ???function foo(){ ??????var name=‘ruby‘; ??????alert(this.name) ?//jerd ???} ???foo(); ???console.log(this); ?//window</script>

2.方法调用中谁调用this指向谁

1.对象方法调用

var person = { ???run: function () { ???console.log(this) ?//指向person这个对象 ???}}person.run()
<script> ???var name=‘jerd‘; ???var people= { ???user:"ruby", ???fn:function(){ ???????console.log(this.user); //this指people这个对象 ???} ???}; ???window.people.fn() ?//ruby</script>
<script> ???var people = { ???name:‘jerd‘, ???obj:{ ???????fn:function(){ ???????????alert(this.name); ???????} ???}};people.obj.fn(); //undefined此时this指向对象b。b中无a属性,因此值为undefined</script>
赋值情况
<script> ???var people = { ???name:‘jerd‘, ???obj:{ ???????fn:function(){ ???????????alert(this); //this指向windonw ???????} ???}};var obj1=people.obj.fn;obj1();</script>this永远指向的是最后调用它的对象,函数fn是被对象obj1所引用,但是在将fn赋值给变量obj1的时候并没有执行所以最终指向的是window

2.事件方法

var btn = document.querySelector("button")btn.onclick = function () { ???console.log(this) // btn}

3.在构造函数中this指向构造函数的实例

1.不使用new 指向window

 function Person(){ ?????console.log(this)//window ?} ?Person()

2.使用new 指向当前对象

function Person(){ ?????console.log(this)//people ?} ?var people = new Person()
<script> ???var name=‘jerd‘; ???function Foo(){ ??????this.name=‘ruby‘; ??????this.func=function () { ??????????var name="zhao"; ??????????alert(this.name) ??????} ???} ???var obj= new Foo(); ????obj.func()</script>#ruby
<script> ???var name=‘jerd‘; ???function Foo(){ ??????this.name=‘ruby‘; ??????this.func=function () { ??????????console.log(this) ?//Foo ??????????(function () { ??????????????alert(this.name) //window ??????????})() ??????} ???} ???var obj= new Foo(); ????obj.func()</script>

js中this的指向

原文地址:https://www.cnblogs.com/zgf-666/p/9249828.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved