JavaScript中this的指向

我们先说一个最简单的this在全局指向的是什么呢?
 
这个问题很简单在浏览器中测试this,全局指向的是window,不过在开发过程中this很少在全局使用,一般都是在函数内的
 
this有几种绑定规则?
 
绑定一:默认绑定
 
// 1.案例一: 
 
function foo() {
 
   console.log(this)
 
 }
 
 foo()//window
 
// 2.案例二:
 
function foo1() {
 
  console.log(this)
 
}
 
function foo2() {
 
  console.log(this)
 
  foo1()
 
}
 
function foo3() {
 
  console.log(this)
 
  foo2()
 
}
 
foo3()//window
 
// 3.案例三:
 
var obj = {
 
  name: “why”,
 
  foo: function() {
 
    console.log(this)
 
  }
 
}
 
var bar = obj.foo
 
bar() // window
 
绑定二:隐式绑定
 
// 1.案例一:
 
var obj = {
 
  name: “why”,
 
  foo: foo
 
}
 
obj.foo() // obj对象
 
// 2.案例二:
 
var obj = {
 
  age: “哈哈哈”,
 
  eating: function () {
 
    console.log(this + “在吃东西”)
 
  },
 
  running: function () {
 
    console.log(this + “在跑步”)
 
  }
 
}
 
obj.eating()//obj对象
 
obj.running()//obj对象
 
var fn = obj.eating
 
fn()
 
//window,为什么是window呢因为把obj.eating这个函数赋值给了fn,fn在全局调用的所以指向的是window
 
// 3.案例三:
 
var obj1 = {
 
  name: “obj1”,
 
  foo: function () {
 
    console.log(this)
 
  }
 
}
 
var obj2 = {
 
  name: “obj2”,
 
  bar: obj1.foo
 
}
 
obj2.bar()//obj2对象
 
绑定三:显示绑定
 
function foo() {
 
  console.log(”函数被调用了”, this)
 
}
 
//1.foo直接调用和call/apply调用的不同在于this绑定的不同
 
//foo直接调用指向的是全局对象(window)
 
foo()
 
var obj = {
 
  name: “obj”,
 
  // age:foo//可以简写这一步
 
}
 
//call/apply是可以指定this的绑定对象
 
foo.call(obj)//obj对象
 
foo.apply(obj)//obj对象
 
foo.apply(”aaaa”)//aaaa
 
// 2.call和apply有什么区别?
 
function sum(num1, num2, num3) {
 
  console.log(num1 + num2 + num3, this)
 
}
 
sum.call(”call”, 20, 30, 40)//传递参数后面可以传无限个数值,都是用逗号分割
 
sum.apply(”apply”, [20, 30, 40])//传递参数用数组接收,一样可以传无限个数值,用逗号分割
 
// 3.call和apply在执行函数时,是可以明确的绑定this, 这个绑定规则称之为显示绑定
 
绑定四:new绑定
 
// 我们通过一个new关键字调用一个函数时(构造器), 这个时候this是在调用这个构造器时创建出来的对象
 
// this = 创建出来的对象
 
// 这个绑定过程就是new 绑定
 
function Person(name, age) {
 
  this.name = name
 
  this.age = age
 
}
 
var p1 = new Person(”哈哈哈”, 18)
 
console.log(p1.name, p1.age)//哈哈哈,18
 
var p2 = new Person(”呵呵呵”, 30)
 
console.log(p2.name, p2.age)//呵呵呵,30
 
这些的案例可以给我们什么样的启示呢?
 
1.函数在调用时,JavaScript会默认给this绑定一个值;
 
2.this的绑定和定义的位置(编写的位置)没有关系;
 
3.this的绑定和调用方式以及调用的位置有关系;
 
4.this是在运行时被绑定的;
 
最后说一下默认绑定和显示绑定bind冲突: 优先级(显示绑定)

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64256.shtml

张贴在3