JavaScript对象中的this指向及其修改

╰+攻爆jí腚メ 2022-01-29 09:49 306阅读 0赞

**1、属性事件的this，在标签内调用事件函数**

①谁调用this所在的函数，就指向谁

a、如果this作为参数传入，那么this就是指向input

![20190521173738101.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70][]

b、如果不在标签的方法中传入this，那么方法中打印this时一般指向window

![20190521173914806.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 1][]

** 2、onclick事件中的this（返回该标签）**

![20190521174839970.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 2][]

** 3、构造函数中的this（this指向当前实例化的具体的对象（谁调用this所在的函数，那么this就指向谁））**

function fn(name,sex,age){
    	this.name = name;
    	this.sex = sex;
    	this.age = age;
    }
    var a = new fn('小明','男',18);

打印a的值：

![20190521175839580.png][]

** 4、原型方法中的this（谁调用this所在的函数，那么this就指向谁）**

Array.prototype.pt = function() {
    	console.log(this)
    }
    var a = [1,2,3,4]
    console.log(a.pt())    // (4) [1, 2, 3, 4]

**5、对象方法中的this**

对象==普通属性+方法属性

这里的this指向obj(谁调用this所在的函数，那么this就指向谁。)

var obj = {
        name:'张三',
        fn:function(){
            console.log("你好，我叫"+this.name);    ///你好，我叫张三
        }
    }

## ##

[20190521173738101.png]: /images/20220129/e3a8705044e14afe889dd5bbf1c89196.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70]: /images/20220129/9dfacb2058d84db4b865e9a110869131.png
[20190521173914806.png]: /images/20220129/ce3da54dd0e2481db2119d50a22db87a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 1]: /images/20220129/cdecc07bfcc3478eba9e5d842d39fa8c.png
[20190521174839970.png]: /images/20220129/2c88900aae0b47af95c8504b6abfec85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 2]: /images/20220129/26b27bd829d442998fab4a0edc5dbaaf.png
[20190521175839580.png]: /images/20220129/101116a4f2534c779d98b5f4a665f8d1.png