JavaScript中this有几种绑定规则

这篇“JavaScript中this有几种绑定规则”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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冲突: 优先级(显示绑定)

以上就是关于“JavaScript中this有几种绑定规则”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


文章标题:JavaScript中this有几种绑定规则
转载注明:http://hbruida.cn/article/podsci.html