甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
这篇“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有几种绑定规则”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。