2024-11-27 22:43阅读: 3评论: 0推荐: 0

JS-this指向

普通函数

this的值取决于函数是如何被调用的

 <body>
  <script>
    // 函数普通中 this指向window
    function foo() {
      console.log(this)
    }
    foo()
    // this的指向是在函数调用时确定的
    // 函数是由对象调用的, 函数中的this指向调用它的对象
    // 对于全局函数是由window对象调用的
    // window.foo()
  </script>
</body>

构造函数

构造函数中的this指向实例对象

 <body>
  <script>
    function Person() {
      // 构造函数中this指向创建的实例对象
    }
    var p = new Person()
  </script>
</body>

对象的方法

对象的方法中的this指向对象

 <body>
  <script>
    const obj = {
      sayHi() {
        console.log(this)
      },
    }
    obj.sayHi()
  </script>
</body>

事件回调

事件回调中的this指向触发事件的对象

 <body>
  <div>1111</div>
  <script>
    const div = document.querySelector('div')
    div.addEventListener('click', function () {
      // 事件的回调用, 由对应dom对象调用的
      console.log(this)
    })
  </script>
</body>

定时器

定时器中的this指向window

 <body>
  <script>
    // 定时器的回调是由window对象调用的, 因此, 回调中的this指向window对象
    window.setTimeout(function () {
      console.log(this)
    }, 1000)
  </script>
</body>

箭头函数

箭头函数的this值是在函数定义时确定的，而不是在函数调用时。箭头函数会捕获其父级作用域的this值，无论这个this值如何变化，箭头函数中的this都会保持不变。

判断方法: 找this的父级作用域, 函数作用域或全局作用域

 <body>
  <script>
    const fn = () => {
      console.log(this)
    }
    fn()
    
    const obj = {
      name: 'xiaoming',
    }
    // call()调用函数, 同时改变this的指向
    function foo() {
      // 在foo作用域中, this指向obj的
      console.log(this)
      const bar = () => {
        console.log(this)
      }
      bar()
    }
    foo.call(obj)
  </script>
</body>

 function Person() {
  this.age = 0;
 
  // 普通函数
  setInterval(function growUp() {
    // 这里的this指向window或undefined（取决于是否在严格模式下）
    this.age++;
    console.log(this.age); // 这里的this不会按预期指向Person实例
  }, 1000);
 
  // 箭头函数
  setInterval(() => {
    // 这里的this捕获的是Person实例的this
    this.age++;
    console.log(this.age); // 这里的this会按预期指向Person实例
  }, 1000);
}
 
var p = new Person();

应用

 <body>
  <button>点击</button>
  <script>
    document.querySelector('button').addEventListener('click', function () {
      // 在事件回调中, this指向button的dom对象
      console.log(this)
      setTimeout(() => {
        // 在定时的普通回调中, this指向window
        // 在定时的箭头回调中, this指向外部(定义时)的this, 也就是dom
        this.innerHTML = '点击了'
      }, 1000)
    })
    // 在回调函数定义时, 尽量使用箭头函数
  </script>
</body>

上一篇JS-DOM与BOM

下一篇Vue-无构建工具的创建、挂载、渲染

本文作者：Khru

本文链接：https://www.cnblogs.com/khrushchefox/p/18573261

posted @ 2024-11-27 22:43 Khru 阅读(3) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

khrushchefox

JS-this指向

普通函数

构造函数

对象的方法

事件回调

定时器

箭头函数

公告

常用链接

我的标签

随笔分类 (117)

随笔档案 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<body>
	<script>
	// 函数普通中 this指向window
	function foo() {
	console.log(this)
	}
	foo()
	// this的指向是在函数调用时确定的
	// 函数是由对象调用的, 函数中的this指向调用它的对象
	// 对于全局函数是由window对象调用的
	// window.foo()
	</script>
	</body>

	<body>
	<script>
	function Person() {
	// 构造函数中this指向创建的实例对象
	}
	var p = new Person()
	</script>
	</body>

	<body>
	<script>
	const obj = {
	sayHi() {
	console.log(this)
	},
	}
	obj.sayHi()
	</script>
	</body>

	<body>
	<div>1111</div>
	<script>
	const div = document.querySelector('div')
	div.addEventListener('click', function () {
	// 事件的回调用, 由对应dom对象调用的
	console.log(this)
	})
	</script>
	</body>

	<body>
	<script>
	// 定时器的回调是由window对象调用的, 因此, 回调中的this指向window对象
	window.setTimeout(function () {
	console.log(this)
	}, 1000)
	</script>
	</body>

	<body>
	<script>
	const fn = () => {
	console.log(this)
	}
	fn()

	const obj = {
	name: 'xiaoming',
	}
	// call()调用函数, 同时改变this的指向
	function foo() {
	// 在foo作用域中, this指向obj的
	console.log(this)
	const bar = () => {
	console.log(this)
	}
	bar()
	}
	foo.call(obj)
	</script>
	</body>

	function Person() {
	this.age = 0;

	// 普通函数
	setInterval(function growUp() {
	// 这里的this指向window或undefined（取决于是否在严格模式下）
	this.age++;
	console.log(this.age); // 这里的this不会按预期指向Person实例
	}, 1000);

	// 箭头函数
	setInterval(() => {
	// 这里的this捕获的是Person实例的this
	this.age++;
	console.log(this.age); // 这里的this会按预期指向Person实例
	}, 1000);
	}

	var p = new Person();

	<body>
	<button>点击</button>
	<script>
	document.querySelector('button').addEventListener('click', function () {
	// 在事件回调中, this指向button的dom对象
	console.log(this)
	setTimeout(() => {
	// 在定时的普通回调中, this指向window
	// 在定时的箭头回调中, this指向外部(定义时)的this, 也就是dom
	this.innerHTML = '点击了'
	}, 1000)
	})
	// 在回调函数定义时, 尽量使用箭头函数
	</script>
	</body>