this的使用(js的问题)

简介: this的使用(js的问题)

this指向

指代当前调用的这个对象

4中绑定(优先级从低到高):

  • 默认绑定
  • 隐式绑定
  • 显示绑定
  • new绑定
var person = {
  name: 'Tom',
  age: 23,
  showName: function () {
    // this->person
    console.log(this.name); // Tom
  },
  showAge: function () {
    // 局部函数
    function _age(){
      // this->window
      console.log(this.age); // undefined
    }
    _age();
    // this->person
    console.log(this.age); // 23
  },
};
 
person.showName()
person.showAge()

可以先保存this

let that = this;

改变this指向

call/apply/bind

var name = 'Tom'
 
var person = {
  name: 'Jack',
  showName: function(){
    console.log(this.name);
  }
}
 
 
person.showName(); // Jack
 
// this->window
var show = person.showName;
show(); // Tom
 
var fn = person.showName.bind(person);
fn(); // Jack

实现一个bind方法

Function.prototype.bind = function(obj){
  var that = this;
  return function(){
    that.apply(obj)
  }
}
 
 
// 验证
var name = 'Tom'
 
var person = {
  name: 'Jack',
  showName: function(){
    console.log(this.name);
  }
}
 
var fn = person.showName.bind(person);
fn(); // Jack1. Function.prototype
相关文章
|
6天前
|
JavaScript
什么是js?js的特点是什么?
什么是js?js的特点是什么?
|
6天前
|
JavaScript 前端开发 Go
octokit.js
octokit.js
11 1
|
6天前
|
存储 JavaScript 前端开发
js的一些小技巧
js的一些小技巧
|
5月前
|
JavaScript
metainfo.js
metainfo.js
49 1
|
6月前
|
开发框架 JavaScript 前端开发
JS 后端框架盘点
JS 后端框架盘点
76 0
|
6月前
|
人工智能 JavaScript 前端开发
js的转变
js的转变
34 0
|
6月前
|
编解码 JavaScript 前端开发
什么是js?(初步了解)
什么是js?(初步了解)
|
11月前
|
JavaScript
js小技巧(2)
js小技巧(2)
|
JavaScript 前端开发
3、JS总结
3、JS总结
53 0
3、JS总结
|
JavaScript
一些js 小技巧
一些js 小技巧
81 0