JavaScript this

  • 2019-06-15
  • 16
  • 0
  • 0

一、this是谁

  1. 作为普通函数调用/自执行,this在全局/自执行(函数名())时,this指向window,实际上并不是指向了window,而是指向了null,被解释成了window。
  2. 使用"use strict"开启严格模式,在es5的严格模式下,自执行,this指向undefined。
function fn(){
    this.xx = 123;
}
fn();
console.log(window.xx); //污染了全局
"use strict";
function fn(){
    console.log(this); //undefined
}
fn();
//不管在任何地方,函数自执行,this指向window

var fn2 = function(){ //fn2 是变量名
    console.log(this); //window
}
fn2();

document.onclick = function(){ //document 对象
    (function(){
        console.log(this); //window
    })()
}

function t3(){
    function t4(){
        console.log(this); //window
    }
    t4();
}
t3();
  1. 作为对象的方法来调用的时候,this指向的是调用那一瞬间的调用者,即调用对象。不管函数声明时,this属于谁。
var bark = 'hahaha';
var dog = {name:'xiaohua',bark:"wangwang"};
var show = function(){
    alert(this.bark);
}
var cat = {bark:'miaomiao'};
dog.t = show;
cat.t = dog.t;
console.log(cat);
cat.t();//miaomiao
(cat.t = dog.t)();//赋值操作的返回值 是等号右边,hahaha
(dog.t)() //等价于 (dog.t()),wangwang
console.log(cat.t = dog.t);

function fn1(){
    function fn2(){
        console.log(this.bark);
    }
    fn2();
}
dog.t = show;
console.log(dog);
dog.t(); //wangwang
dog.fn1= function(){
    (function(){
        console.log(this.bark); //hahaha
    })();
};
dog.fn1()
var name = "The window";
var obj = {
    name:"my name",
    getNameFunc:function(){
        return function(){
            return this.name;
        }
    }
}
console.log(obj.getNameFunc()()); //The window
  1. 作为构造函数调用时,js中没有类的概念,创建对象是用构造函数来完成的,或者直接用{}来写对象。
function Dog(name, age){
    this.name = name;
    this.age = age;
    this.bark = function(){
        alert(this.name);
    }
}
var dog = new Dog("虎子", 2);
dog.bark();
/*
new Dog 发生了以下几个步骤
1. 系统创建空对象{},空对象constructor属性指向Dog函数
2. 把函数的this指向该空对象
3. 执行该函数
4. 返回该函数
*/
function Pig(){
    this.age = 99;
    return "abc";
}
var pig = new Pig(); //Pig对象,因为函数作为构造函数运行时,return的值是忽略的,还是返回对象
console.log(pig);
  1. call、apply、bind可以改变this指向。

二、call、apply

  1. call和apply都是在函数执行时,扭转this指向
  2. call:语法格式,函数.call(对象,参数1,参数2……);
  3. apply:语法格式,函数.apply(对象,[参数1,参数2…….]);
function t(num){
    console.log('我的真实年龄是' + this.age);
    console.log('但我一般告诉别人' + (this.age-num));
}

var lily = {name:'lily',age:20};

// lily.t = t; //不符合封装性 添加了额外的属性
// lily.t(2);

t.call(lily,2); //在执行的时候 把自身的this 指向了lily
console.log(lily);
var obj = {};
function a(x,y){
    console.log(x+y);
    console.log(this);
}

a.apply(obj,[3,4]);
a.call(obj,3,4); 
box.onclick = function(){
    console.log(this);//此时指代box的this 
    fn.call(this,100,200); //扭转指向 到 fn当中的this
};
wrap.onclick = fn;
function fn(x,y){
    console.log(this);
    this.style.width = x + 'px';
    this.style.height = y + 'px';
}
function a(x,y){
    console.log(this);
}
a.call();//指向window
a.call(100); //指向Number
a.call('haha'); //String 
a.call(true); //Boolean 
a.call(null); //window
a.call(this); //window
a.call([1,2,3]); //数组

三、bind

  1. 写在函数(不是声明)表达式中,不立即执行,扭转this指向。
  2. 传参:在表达式中传参,类似于call;在执行时传参,但失去了本身的意义。
document.onclick  = function(){
    onsole.log(this); //window
}.bind(window);
var a = function(x,y){
    console.log(x+y);
    console.log(this);
}.bind(document,10,20);
a();

var a = function(x,y){
    console.log(x+y);
    console.log(this);
}.bind(document)(10,1);

评论

还没有任何评论,你来说两句吧