Day18 - 介绍一下this指向4种形式 #61
Comments
四种形式
bind指定函数执行时的 apply指定函数执行时的 call指定函数执行时的 new在调用构造函数的时候将 |
|
|
第一、如果一个函数中有this，但是它没有以对象方法的形式调用，而是以函数名的形式执行，那么this指向的就是全局对象； 如： 第四、如果一个构造函数或以类方法中有this，那么它指向该构造函数或类创建出来的实例对象。 |
|
默认绑定 |
|
_Rainbow_Z: _Rainbow_Z: _Rainbow_Z: |
|
|
a.如果是一般函数,this指向全局对象window; b.在严格模式下"use strict",为undefined. c.对象的方法里调用,this指向调用该方法的对象. d.构造函数里的this,指向创建出来的实例. |
|
结论
改变this指向的方法改变this的指向并且执行调用函数 而bind 改变this的指向，返回的是函数 |
|
this指向的四种情况：
|
一，判断this指向原则函数中的this，指向函数运行时所在的对象（当前对象，而不是上层对象）。如果函数运行时没有依赖的当前对象，则this指向最上层对象(eg: window)。 二，this指向的几种情况1.
|
|
this指向的4种形式按优先级来说分别为
|
|
|
当默认情况 this 指向 window 但严格模式下指向 undefined |
|
● web全局环境下的this指向window，nodejs环境为global对象 |
this 绑定有四条规则默认绑定，隐式绑定，显示绑定，new绑定 this 是在函数被调用时才会绑定的，所以要确定函数中this绑定，我们首先需要找到函数的调用位置。 默认绑定函数被直接调用，不符合其他三条绑定规则则会默认绑定，非严格模式下this指向全局对象，严格模式下指向undefined 隐式绑定调用位置有上下文对象，或者说调用函数被某个对象拥有或者包裹。引用到了对象的属性上，然后通过对象调用。 obj的foo属性，指向了foo函数，通过obj.foo()调用，this指向了obj。
但这里要注意，隐式丢失的情况，就是因为obj.foo其实也指向foo函数的引用，这个引用如果被赋值给另一个变量，再通过该变量调用，那就相当于跳过了obj，直接调用了，所以会造成隐式丢失。 以上，相当于全局直接调用foo函数，所以是默认绑定。 显示绑定通过，apply(...)，call(...) ,bind( )硬绑定，修改this指向 bind其实就是基于包裹了一层函数，内部再通过apply实现的硬绑定，解决上面说的this丢失问题，这章暂不细纠。 以上代码都将，foo中this指向了obj。 new通过new的方式来调用函数，会创建一个新的实例对象，构造函数中的this也会指向这个新创建的对象。 总结以上，我们知道了确认this绑定，需要知道调用位置，再按优先级从高到低,ew绑定>显示>隐式>默认，看匹配哪条规则，就能明确this指向。 |
var myObject = {
name: 'myobj',
myFunc: function() {
console.log(this.name) // myobj
}
}
myObject.myFunc()
var name = 'window';
var myObject = {
name: 'myobj',
myFunc: function () {
console.log(this.name) // myobj 方法调用模式
var func = function() {
console.log(this.name) // window, 函数调用模式
}
func()
}
}
myObject.myFunc()
var myObject = function(name) {
this.name = name
}
myObject.prototype.myFunc = function(){
console.log(this.name)
}
var obj = new myObject('objname');
obj.myFunc() // objname
var name = 'window'
var obj = {
name : 'obj'
}
var myFunc = function(){
console.log(this.name)
}
myFunc() // window
myFunc.bind(obj)() // obj
myFunc.apply(obj) // obj
myFunc.call(obj) // obj |
全局上下文的this
函数上下文的this
不同调用this的优先级
|
|
1.如果是一般函数,this指向全局对象window; |
|
this 对象是在运行时基于函数的执行环境绑定的 |
|
this指向，也即this绑定的4种形式如下：
console.log(this); // window;
function foo(){
console.log(this);// window;
}
foo()
setTimeout(function(){
console.log(this); // window
},1000)
let obj = {
foo:function(){
console.log(this); // obj
}
}
obj.foo()
function foo(){
console.log(this.a)
}
let obj = {
a:1
}
foo.call(obj);// 1
function Dog(options){
this.name = options.name;
this.age = options.age;
}
dog1 = new Dog({name:'dog1',age:'1'})
console.log(dog1.name); // dog1
console.log(dog1.age); // 1
dog2 = new Dog({name:'dog2',age:'2'})
console.log(dog2.name); // dog2
console.log(dog2.age); // 2 |
结论
改变 this 指向的方法call
apply
bind
|
|
|
this 这四种指向性问题，其实说的是一个函数被调用的四种方式：
这四种调用方式会造成的是会有不同的this指向。如果你是用函数的方式去调用，那么this在严格模式下就是undefined，在普通模式下就是window。如果你是用方法的方式去调用，那么 this 指向的就是这个方法所属的那个对象。如果你是用构造函数去调用，那么this就是一个空对象。如果你是用call apply bind去调用，那么就是你指定this的值了。 |
and others
The text was updated successfully, but these errors were encountered: