this在函数中指向的用法示例

279 阅读2分钟

this即是函数的执行主体。

事件绑定中的this都是当前操作的元素;自执行函数中的this指的是window;一般函数执行时内部的this指向 看点,点前边是谁 this就是谁;其他的都是window;箭头函数没有this 会向上级查询,是上级作用域的this 上级如果没有会接着向上查询;

用法示例一

var ary = [1, 2, function () { console.log(this) }, () => { console.log(this) }]
let f = ary[2];
f()
ary[2]() 
ary[3]() 

第一次输出 f()分析,我们根据上面既定的规律,一般函数执行时this的指向要根据看点,但是本次函数执行没有‘点’,所以此时的this指的应该就是window。

第二次输出 ary [ 2 ] ()分析,ary [2] ()相当于是ary.2(),所以这其中的this指的就是ary,会输出该数组。

第三次输出ary [3] ()分析,箭头函数中的this会向上级查询,这时会输出一个window对象。

用法示例二

var person = {
    name: "zhufeng",
    pro: {
        name: "peixun",
        getName: function() {
            return this.name;
        },
        getName2: function () {
            return function () {
                return this.name
            }
        }
    }
};
console.log(person.pro.getName());
var pepole = person.pro.getName;
console.log(person.pro.getName2()());
console.log(pepole());

第一次输出分析person.pro.getName() 调用对象person中属性对象pro的getName普通函数,这时该函数中的this就指的是''点'前面的person.pro,所以this.name就指的是'peixun'

第二次输出分析person.pro.getName2()() 指的是执行getName2中的内置函数,假设该内置函数的函数名为f1,则该输出表达式即为person.pro.getName()f1() 由此可见,this所在的那个函数被调用时前面没有'点'所以,该函数中this指的就是window对象,this.name即为 window.name即为'zhufengpeixun.com'。

第三次输出分析console.log(pepole()),people()中不带有'点',所以该函数中的返回值中的this指的是window,返回值即为window.name 'zhufengpeixun.com'

用法示例三

var name = '珠峰';
var age = 9;
age = (function (name,age) {
    name = '珠峰';
    age = age || this.age;
    this.age = arguments[0];
    console.log(name,age)
    return this.age;
})(name,age);
console.log(name,age);

注意this所在的函数为自执行函数,自执行中函数的this指的就是全局对象,所以自执行函数中this.age指的就是window.age即为9;其中this.age=arguments[0]即将该函数中的实参name的值赋予了全局中的age;所以第一次输出中私有变量name与age中的值没有改变,输出为'珠峰'和'9',第二次输出全局变量age的值已经发生变化为'珠峰',所以输出结果为 '珠峰' '珠峰'