JavaScript “this“指向及习题

时间:2020-8-28 作者:admin


文章目录

this指向

01 函数预编译过程(this –> window)

函数预编译过程中的this是指向window的。

实例如下:

//实例
function test(c) {
	var a = 123;
	function b() {}
}
test(1);

AO对象如下:

AO{
	arguments: [1],
	this: window,
	c: 1,
	a: undefined,
	b: function(){}
}

02 全局作用域里(this –> window)

在全局作用域里的this是指向window的。

GO对象如下:

GO{
	this: window
}

03 call/apply(改变函数运行时this指向)

3.1 定义和使用

(1)call 需要把实参按照形参的个数传进去
XXX.call(X,s1,s2,s3)
即 第一位(X)都是表明改变的指向,第二位及后面的位(s1,s2,s3···)是一个一个的实参。

(2)apply 需要传一个arguments
XXX.apply(X,[s1,s2,s3])
即 第一位(X)都是表明改变的指向,第二位是一个arguments,若数量多可以用数组代替。

(3)call和apply的作用和区别

  • 作用,改变this指向
  • 区别,后面传的参数形式不同(传参列表不同)

其实执行 函数(); 和执行 函数.call(); 是一样的,因为系统在后台会将 函数(); 自动变成 函数.call();

3.2 应用举例

call会让Person中的this值全部指向obj,即使用call可以理解为调用别人的函数实现自己的功能:

function Person(name, age) {
    // 即 this == obj
    this.name = name;
    this.age = age;
}
var person = new Person('deng', 100);
var obj = {}
Person.call(obj, 'cheng', 300); 
//call会让Person中的this值全部指向obj

04 谁.function()

function()里面的this指向“谁”,即谁调用的这个方法,this就指向的是谁。

实例如下:obj调用了a这个方法,所以a里面的this指向的是obj。

var obj = {
	a: function() {
		console.log(this.name)
	},
	name: "abc"
}
obj.a(); //obj调用了a这个方法,所以a里面的this指向的是obj

this习题

例题1

var name = '222';
var a = {
    name: '111',
    say: function () {
        console.log(this.name);
    }
}
var fun = a.say;
fun(); //222
a.say(); //111

var b = {
    name: '333',
    say: function (fun) {
        fun();
    }
}
b.say(a.say); //222
b.say = a.say;
b.say(); //333

例题2

var foo = 123; //此时的foo存储在widow中的

function print() {
    var foo = 456
    this.foo = 789; 
    // 因为没有对象调用函数,所以此时的this指向window,即覆盖了wido以前foo=123变成了foo=789
    console.log(foo); //456  即函数体中有foo为456
}
print();

修改例题2:(1)

var foo = 123;

function print() {
    this.foo = 789; 
    // 因为没有对象调用函数,此时的this指向window,即覆盖了wido以前foo=123变成了foo=789
    console.log(foo); //789   即此时的foo是window中的
}
print();

修改例题2:(2)

var foo = 123;

function print() {
    // 使用了new之后
    // var this = Object.create(print.prototype)
    // 即
    // var this = {
    //      foo: 789
    //      __proto__: print.prototype
    // }
    this.foo = 789;
    console.log(foo); //123   即此时的foo是window中的
}
new print();
// GO{
//      foo: 123
//      print: function() {}
// }        

例题3

var aa = 5;

function demo() {
    aa = 0;
    console.log(aa);
    console.log(this.aa);
    var aa;
    console.log(aa);
}
demo(); // 0 5 0
new demo(); // 0 undefined 0

个人笔记,欢迎大家交流探讨!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。