Javascript原型 与 this

加入QQ群：864680898，一起学习进步！点击群名可查看本人网站，有最新文章！

Javascript原型 与 this

在javascript中万物皆对象

call 和 apply

call() call(thisObj，Object)

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

apply() apply(thisObj，[argArray])

定义：应用某一对象的一个方法，用另一个对象替换当前对象。

function foo(a,b,c,d) {
  console.log(a,b,c,d)
}
var arr = [1,2,3,4]

foo.call(foo, ...arr)   // 1 2 3 4
foo.apply(foo, arr)     // 1 2 3 4

call()和apply()主要是能扩充函数赖以运行作用域。两者的作用方式相同，它们的区别在于接收参数的方式不同，对于call()而言，第一个参数this与apply()相同，其他的参数必须直接传给函数，要一个一个的列出来，而对于来说，apply()可以接收一个数组或arguments对象。所以如何选择二者，在于哪种给函数传参数的方式最简单。

• 使用

我在使用小程序写音乐播放器的时候，因为小程序每个页面内部数据必须注册才能渲染到view，那么就算是全局变量也要注册到页面中。那我们不止要更新全局的音频的状态，还要写该页面的状态，是不是很麻烦，我这是使用了原型方法，便只用绑定一次

const app = getApp()
export default class Props{
  static setPlayer(player, cb=null){
    app.player = Object.assign({}, app.player, player)
    this.setData({ player: app.player }, ()=>{
      cb && cb()
    })
  }
  static setPlaying(playing, cb=null){
    app.player.playing = Object.assign({}, app.player.playing, playing)
    this.setData({ player: app.player }, ()=>{
      cb && cb()
    })
  }
}

然后使用时

const app = getApp()
import props from '../utils/props/js'

page({
  data:{
    player:{}
  },
  onLoad(){
    props.setPlayer.call(this, app.player)
  }
})

this的指向

先看一段代码

function showName(){
  console.log(this.name)
}
var name = 'mySkey'
showName()    // mySkey

为什么打印出了mySkey，不是undefind呢？

• this指代谁，要看函数的调用位置，此时的this就是指代的window

使用call或者apply改变this

function showName(){
  console.log(this.name)
}
var obj = {
  name: '小明'
}
var name = 'mySkey'
showName.call(obj)    // 小明

此时将作用域指定在obj中，那么找到的name就是 小明

隐式绑定

var obj = {
  name: 'mySkey',
  showName(){
    console.log(this.name)
  }
}
obj.showName()    // mySkey

打印出了 mySkey ，那是因为调用函数时，this指向的是obj，然后访问到了obj的name

• 隐式丢失

var obj1 = {
  name: 'mySkey',
  showName(){
    console.log(this.name)
  }
}
var obj2 = {
  name: 'xiaoming',
  obj1: obj1
}
obj2.obj1.showName()  // mySkey

显式绑定

如果我们不想在对象内部包含函数引用，而想在某个对象上强制调用函数，该怎么
做呢？

• 能使用原型方法call和apply改变this的指代：

对于call()而言，第一个参数this与apply()相同，其他的参数必须直接传给函数，要一个一个的列出来

var obj = {
  name: 'ming',
  showName(){
    console.log(this.name)
  }
}
var mySkey = { name: 'mySkey' }
obj.showName.call(mySkey)   // mySkey

apply()可以接收一个数组或arguments对象。所以如何选择二者，在于哪种给函数传参数的方式最简单

var obj = {
  name: 'ming',
  showName(){
    console.log(this.name)
  }
}
var mySkey = { name: 'mySkey' }
obj.showName.apply(mySkey)   // mySkey

• bind来绑定作用域

在 ES5 中提供了内置的方法 Function.prototype.bind，bind(…) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数

var obj = {
  name: 'ming',
  showName(){
    console.log(this.name)
  }
}
var mySkey = { name: 'mySkey' }
var newShowName = obj.showName.bind(mySkey)   // mySkey
newShowName()

传递当前作用域

使用词法作用域，将上下文context传递，第三方库的许多函数，以及 JavaScript 语言和宿主环境中许多新的内置函数，都提供了一
个可选的参数，通常被称为“上下文”（context）

function foo(el) {
  console.log( el, this.id );
}
var obj = {
  id: "mySkey"
};
[0,1,2].forEach(foo, obj)

其实也可以当成形参传入使用

function foo(el) {
  console.log( el, el.id );
}
var obj = {
  id: "mySkey"
};
foo(obj)

new()绑定

在传统的面向类的语言中，“构造函数”是类中的一些特殊方法，使用 new 初始化类时会调用类中的构造函数。通常的形式是这样的：
something = new MyClass(…);

JavaScript 也有一个 new 操作符，使用方法看起来也和那些面向类的语言一样，绝大多数开 JavaScript 中 new 的机制也和那些语言一样。然而，JavaScript 中 new 的机制实际上和面向类的语言完全不同。

function foo(name) {
  this.name = name;
}
var bar = new foo('mySkey');
console.log( bar.name ); // mySkey

es6中class类new()实例化一个对象时，也会绑定当前作用域

class Superman{
  constructor(name){
    this.name = name
  }
}
let mySkey = new Superman('mySkey')
console.log(mySkey.name)  // mySkey

判断this

现在我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则。可以按照下面的顺序来进行判断：

• 1、 函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。

var bar = new foo()

• 2、 函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是指定的对象。

var bar = foo.call(obj2)

• 3、 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象。

var bar = obj1.foo()

• 4、 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。

var bar = foo()

就是这样。对于正常的函数调用来说，理解了这些知识你就可以明白 this 的绑定原理了。
不过……凡事总有例外。

箭头函数

箭头函数并不是使用 function 关键字定义的，而是使用被称为“胖箭头”的操作符 => 定义的。箭头函数不使用 this 的四种标准规则，而是根据外层（函数或者全局）作用域来决定 this，也就是不会在内部绑定作用域

function showName (){
  return (name)=>{
    console.log(this.name)
  }
}
let mySkey = { name: 'mySkey' }
let xiaoming = { name: 'xiaoming' }

let show = showName.call(mySkey)
show.call(xiaoming)   // mySkey

常用于回调函数中，没有箭头函数时，使用下面这样解决问题的：

function showName(){
  var that = this;
  setTimeout(function(){
    console.log(that.name)
  }, 2000)
}
var mySkey = { name: 'mySkey' }
showName.call(mySkey)     // 2s后打印出 mySkey

使用箭头函数就不需要利用词法作用域的特性

function showName(){
  setTimeout(()=>{
    console.log(this.name)
  }, 2000)
}
let mySkey = { name: 'mySkey' }
showName.call(mySkey)     // 2s后打印出 mySkey