this指向与绑定

function cat(age,color){
    console.log(this)
    console.log(color)
}
const age1 = 1
const age2 =2
const color1 = 'white'
const color2 = 'black'

//1.函数直接调用：
cat(age1,color1)
/*node输出：
    this---->    根据运行环境而定,指向当前运行的环境，浏览器中指向window
    color---->    white
*/

//2.this隐式调用
const new_cat1 = {
    name:'白猪',
    cat
}
//new_cat1.cat(age1,color1)
/*node输出：
    this---->    { name: '白猪', cat: [Function: cat] }  this指向当前调用cat函数的对象:new_cat1
    color---->    white
*/

//3.this显示调用 call与apply 
cat.call({name:'白猪'},age1,color1)
/*node输出：
    this---->    { name: '白猪'}  this指向call()的第一个参数
    color---->    white
*/
cat.apply({name:'白猪'},[age1,color1])
/*node输出：
    this---->    { name: '白猪'}  this指向apply()的第一个参数
    color---->    white
*/

//call与apply的结果是一样的，区别在于调用方法的参数的传递形式不一样.
// call是按照参数顺序依次传入,call(this对象,arg1,arg2...)
// apply是把参数放入一个数组里,apply(this对象,[arg1,arg2...])

//4.bind强制绑定this

const new_cat2 = cat.bind({name:'黑猪'})   //bind只绑定this,不执行cat函数
new_cat2(age2,color2)                    //new_cat2执行
/*node输出：
    this---->    {name:'黑猪'}  this指向bind()里的参数对象
    color---->    black
*/    

const my_cat = {
    name:'白猪',
    new_cat2
}
my_cat.new_cat2(age1,color1)     
/*node输出：
    this---->    {name:'黑猪'} 
    color---->    white
    
     this依然指向new_cat2所bind()里的参数对象，它没有指向my_cat证明bind绑定的this优先级更高
*/

new_cat2.call({name:'白猪'},[age1,color1])
/*node输出：
    this---->    {name:'黑猪'} 
    color---->    white
    
     this依然指向new_cat2所bind()里的参数对象，它没有指向由call绑定的{name:'白猪'}证明bind绑定的this优先级比call高
*/

cat(2,'black')
/*node输出：
    this---->    根据运行环境而定,指向当前运行的环境，浏览器中指向window
    color---->    black
    
    单纯执行cat函数时，this依然指向运行环境，说明前面的this绑定并不会影响函数本身
*/