this关键字
this的位置
在命名函数中的this
window
在构造函数的this
在自定义对象中的this
回调函数中
this在回调函数中
this在闭包中
修改函数执行的上下文环境
call
apply
bind

this关键字

this在我们开发过程中也是举足轻重.this在不同位置的可能出现不同意义,因此为了能够更熟练地开发,我们应该对this有更深入的了解.

this的位置

在命名函数中
在构造函数
在回调函数中
在闭包中

在命名函数中的this

function fn(){
    console.log(this);//输出结果是window对象
    this.console.log("Hello World");
}
fn();

window

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

上面的代码我们可以改成一下方式

function fn(){
    console.log(this);//输出结果是window对象
    this.console.log("Hello World");
}
window.fn();

在构造函数的this

之前的对象的章节中,我们已经了解到,在构造函数里,this指向的就是通过构造函数创建出来的实例对象.

function Person(name,age){
    this.name = name;
    this.age = age;
}
// 在这里,this就是p1示例对象
var p1 = new Person("小明",20);
//在这里,this就是p2对象
var p2 = new Person("大明",22);

在自定义对象中的this

在对象的函数里,this默认是指向该对象本身, 下面例子中 this就是表示obj对象

var obj = {
    func:function(){
        console.log(this) //obj对象
    }
}

但是如果对象的函数里又声明了函数呢?在新声明的函数里,this又指向谁呢?

var obj = {
    name: "javascript",
    func:function(){
        console.log(this);
        console.log(this.name);
        var f = function(){
            console.log(this);
            cosnole.log();
        }
        f();
    }
}

上面的例子最终的输出结果是 window

回调函数中

百度百科的示义如下：

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。

从上面的这段阐述之中，我们不难发现两点。

函数回调就是将函数的地址当作参数传递给另一个函数。
函数回调的用途简单来说就是进行事件的响应或者事件触发。

现实例子:你有一个任务,但是有一部分你不会做,或者说不愿做,所以我来帮你做这部分,你做你其它的任务工作或者等着我的消息,但是当我完成的时候我要通知你我做好了,你可以用了,我怎么通知你呢?你给我一部手机,让我做完后给你打电话,我就打给你了,你拿到我的成果加到你的工作中,继续完成其它的工作.这就叫回叫,手机是我通知你的手段,它就是回叫函数,也叫回调函数.

自定义forEach函数

function forEach(callBack){
var length = this.length-1;
for(var i=0;i<=length;i++){
   callBack(this[i],i)
}
}
Array.prototype.mtForEach =forEach;
var arr = ["html","css","javascript"];
arr.mtForEach(function(item,index){
console.log(item,index);
})

自定义sort函数

function sort(callBack){
console.log(this);
var arr = this;
var a = 1;
var b = 0;
// 判断升序和降序
var order = callBack(a,b);
for(var i=0;i<=arr.length-1;i++){
      for(var j=arr.length-1;j>i;j--){
        if(arr[j-1]>arr[j]){
          var temp = arr[j-1];
          arr[j-1] = arr[j];
          arr[j] = temp;
        }
      }
}
if(order>0){
  return arr;
}
if(order<0){
  return arr.reverse();
}
}
Array.prototype.mtSort = sort;
var arr = [4,1,2,4,6,8,0];
arr.mtSort(function(a,b){
return a-b;
})
console.log(arr);

this在回调函数中

在上面自定义的遍历方法中,我在它的回调函数里,打印this

arr.mtForEach(function(item,index){
  console.log(this);
  console.log(item,index);
})

this在闭包中

function test(){
  var name = "js"
  return func(){
     console.log(this);
  }
}
var func = test();
func();

修改函数执行的上下文环境

call
apply
bind

call

var obj = {
  name: "javascript",
  func:function(){
     return function(){
       console.log(this);
     }
  }
}
var fn = obj.func();
fn.call(obj);

apply

var obj = {
  name: "javascript",
  func:function(){
     return function(){
       console.log(this);
     }
  }
}
var fn = obj.func();
fn.apply(obj,[]);

bind

var obj = {
  name: "javascript",
  func:function(){
     return function(){
       console.log(this);
     }
  }
}
var fn = obj.func();
var f = fn.bind(obj);

03.this