JavaScript 学习笔记【this】

Love The Way You Lie 2023-02-26 02:20 13阅读 0赞

### JavaScript 学习笔记【this】 ###

*  普通函数
 *  箭头函数
 *  构造函数
 *  作为DOM事件处理函数
 *  作为内联事件处理函数
 *  匿名函数 & 闭包函数
 *  设置 this
 *   *  以下函数式编程方法（第二个参数作为回调中的\`this\`）
 *  参考资料

# 普通函数 #

1.  普通函数：谁调我 `this` 指谁。
2.  全局环境下指向全局对象。`浏览器`里就是`window` 对象。`node`中`global`
3.  严格模式下默认`undefined`
4.  在一连串引用中，函数只认最后调用它的对象。`a.b.c.d.foo()` 指向`d`

// obj.bar() === obj; // true
    var obj = { 
        bar: function() { 
            return this;
        }
    };
    
    // obj.foo() === obj; // true
    var obj = { };
    obj.foo = function(){  
    	return this
    }
    
    // obj.bar()() === obj; // true
    var obj = { 
        bar: function() { 
            return (() => this)
        }
    };

# 箭头函数 #

1.  指向创建时的环境（声明箭头函数的位置 `this` 是谁就指向谁）
2.  `call`、`apply`、`bind` 设置 `this` 无效

var obj1 = {  
    	bar: this 
    };
    var obj2 = {  
    	bar: () => this
    };
    
    obj1.bar === obj2.bar(); //true
    obj1.bar === window; // true

# 构造函数 #

构造函数中的 `this` 指向 `new` 出来的新对象。

function Foo(){ 
    	this.id = 9527;
    	this.boo = () => this;
    }
    var obj = new Foo();
    
    obj.id === 9527; // true
    obj.boo() === obj; // true

# 作为DOM事件处理函数 #

`this`指向触发事件的元素。(有部分浏览器不乖)

# 作为内联事件处理函数 #

function Foo(){ 
    	alert(this.id);
    }

默认`this`指向`当前元素`可以直接使用

非要在这里定义函数，就只能把`ths`传进去了

<a onclick="(function(that){ alert(that.id)})(this)" id="9527">确定</a

# 匿名函数 & 闭包函数 #

匿名函数中的`this`指向全局对象

var obj = { 
    	id: 9527,
        bar: function() { 
            return function(){ 
    			return this;
    		}
        }
    };
    
    obj.bar()() === window; // true

换个写法就直观了。这不就是`全局环境`下调用`普通函数`嘛  
`闭包函数` 本质上还是返回一个`函数`或者返回一个`对象来调用函`数。最终`this`还是看谁调用`函数`。

var foo = obj.bar();
    foo() === window; // true

# 设置 this #

function foo(p1, p2, p3...){ ...}

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>第1个参数</th> 
   <th>后续参数</th> 
   <th>示例</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call" rel="nofollow">Function.prototype.call()</a></td> 
   <td>作为调用<code>foo</code>的对象</td> 
   <td>原样传给<code>foo</code></td> 
   <td><code>foo.call({}, ...)</code></td> 
   <td>直接调用</td> 
  </tr> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" rel="nofollow">Function.prototype.apply()</a></td> 
   <td>作为调用<code>foo</code>的对象</td> 
   <td>接受<code>array</code>自动展开传给<code>foo</code></td> 
   <td><code>foo.call(thisArg, [...])</code></td> 
   <td>直接调用</td> 
  </tr> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" rel="nofollow">Function.prototype.bind()</a></td> 
   <td>作为<code>foo</code>中的<code>this</code></td> 
   <td>无</td> 
   <td><code>foo.bind(thisArg)</code></td> 
   <td>返回一个设置好了<code>this</code>的函数</td> 
  </tr> 
 </tbody> 
</table>

## 以下函数式编程方法（第二个参数作为回调中的`this`） ##

[Array.prototype.map()][Array.prototype.map]  
[Array.prototype.flatMap()][Array.prototype.flatMap]  
`除下面两个 reduce 没有，其它的函数式编程方法都有这个功能。不一一列举了`  
[Array.prototype.reduce()][Array.prototype.reduce]  
[Array.prototype.reduceRight()][Array.prototype.reduceRight]

# 参考资料 #

[Web 开发技术 > JavaScript > JavaScript 参考 > 表达式和运算符 > this][Web _ _ JavaScript _ JavaScript _ _ _ _ this]

[Array.prototype.map]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
[Array.prototype.flatMap]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
[Array.prototype.reduce]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
[Array.prototype.reduceRight]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
[Web _ _ JavaScript _ JavaScript _ _ _ _ this]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this