this指向 + 案例

本文深入解析JavaScript中this关键字的指向问题,探讨了在不同上下文中this的指向变化,以及如何利用call、apply和bind方法来改变函数调用时的this指向,通过具体示例展示了这些方法在实际编程中的应用。
摘要由CSDN通过智能技术生成
this指向改变
        因为js 的特性,导致很多this指向并不如人意,js给我们提供了很多this指向改变的方法;
        this指向的改变我们一般都应用在面向对象的编程中
        
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
.phoph{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 100;
 
}
.pgp{
position: absolute;
z-index: 1;
background: rgba(0,0,0,0.3);
width: 100%;
height: 100%;
 
}
.pop{
width: 300px;
height: 100px;
background: white;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
font-size: 40px;
z-index: 2;
margin: auto;
line-height: 100px;
text-align: center;
}
#btn{
width: 50px;
height: 30px;
margin: 20px 20px;
}
 
</style>
<body>
<button id="btn">按钮</button>
<div class="phoph">
<div class="pop">
<p>hello world</p>
</div>
<div class="pgp">
 
</div>
</div>
</body>
<script>
function Phoph(){}
Phoph.prototype.init = function(){
this.btn = document.querySelector("#btn");
this.phoph = document.querySelector(".phoph");
this.bindEvent();
}
Phoph.prototype.bindEvent = function(){
this.btn.onclick = this.show.bind(this);
this.phoph.onclick = this.hide.bind(this);
}
Phoph.prototype.show = function(){
this.phoph.style.display = "block";
}
Phoph.prototype.hide = function(){
this.phoph.style.display = "none";
}
 
 
var phoph = new Phoph();
phoph.init();
</script>
</html>
为了不让 函数嵌套 把事件处理函数提取出来;
 
this.btn === object;
onclick === 属性名
this.show === 一个函数的引用地址
 
object.proprety = function(){
    console.log(this);
}
object.proprety();
 
在面向对象编程之中 所有的函数的this指向必须指向当前的实例化对象
 
 
this指向的改变方案
 
1、call apply; ******在调用函数的时候改变this指向的
function foo (a,b){
    console.log(this , a,b);
}
window.foo();
foo.call({},1,2);
foo.apply({},[3,4])
 
 
call , apply 方法第一个参数是改变被调用的函数的this指向;
不同:
        call :第二个之后的实参和函数体内的形参一一对应;
        apply: 第二个参数是数组,数组的每一项和形参的每一项一一对应;
2.bind => ES5;
   在函数体上改变this的指向;
    在函数体创建的时候就规定好了函数的this指向从此不可变更;
    bind 方法是产生一个新函数的方法,所以bind方法规定必须给匿名函数使用;
 
var foo = function (a){
    console.log(this,a);
}.bind({},10);
foo(1000)
 
 
 

转载于:https://www.cnblogs.com/TianPeng2/p/9991748.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值