What's this?
由于运行期绑定的特性，JavaScript 中的 this 含义非常多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象
作为函数调用
- 在函数被直接调用时this绑定到全局对象。在浏览器中，window 就是该全局对象
var a = 1
console.log(this) //全局对象window
function fn(){
console.log(a) //1
console.log(this) //window
console.log(b) //b is nor defined
}
fn()
内部函数
- 函数嵌套产生的内部函数的this不是其父函数，仍然是全局变量
function fn(){
function fn1(){
console.log(this) //window
}
fn1()
}
fn()
setTimeout、setInterval
- 这两个方法执行的函数this也是全局对象
document.addEventListener('click', function(e){
console.log(this); //document
setTimeout(function(){
console.log(this); //window
}, 200);
}, false);
- 如果想在setTimeout、setInterval执行的函数中返回的this是document，方法一只需要有一个中间变量，保存this即可。
document.addEventListener('click',function(e){
console.log(this) //document
var _this = this
setTimeout(function(){
console.log(_this) //document
})
})
- 如果想在setTimeout、setInterval执行的函数中返回的this是document，方法二，使用bind，使其第一个参数为this
document.addEventListener('click',function(e){
setTimeout(function(){
console.log(this) //document
}.bind(this))
})
作为构造函数调用
- 所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象
new 运算符接受一个函数 F 及其参数：new F(arguments...)。这一过程分为三步：
- 创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype 。
- 初始化实例。函数 F 被传入参数并调用，关键字 this 被设定为该实例。
- 返回实例。
具体实例：
function People(name){
this.name = name
}
People.prototype.sayName = function(){
console.log(this.name)
}
var p1 = new People('lili')
- 作为对象方法调用
在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象
var obj = {
name: 'kasck',
fn: function(){
console.log(this) //obj
}
}
obj.fn()
- 对象方法的嵌套
var obj2 = {
name: 'lll',
obj3: {
fn: function(){
console.log(this) // obj3
}
}
}
obj2.obj3.fn()
- 小陷阱
var obj = {
name: 'kasck',
fn: function(){
console.log(this)
}
}
obj.fn()
var fn2 = obj.fn
fn2() //window.fn2() this === window
Function.prototype.bind
bind:返回一个函数，并且使函数内部的this为传入的第一个参数
var obj = {
name: 'kasck',
fn: function(){
console.log(this)
}
}
obj.fn()
obj3 = {a:3}
var fn3 = obj.fn.bind(obj3) //fn3函数内部的this为bind传入的第一个参数
fn3() // this = obj3
使用call和apply设置this
- call和apply调用一个函数传入函数执行上下文参数。
fn.call(context,parma1,parma2...);
fn.apply(context,paramArray);
语法很简单，第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组。
fn2.call(obj1);
fn2.apply(obj2);
- call的实例
var value = 100;
var obj4 = {
value: 200
};
function fn4(a,b){
console.log(this.value + a + b)
}
fn4(3,4) //107
fn4.call(obj4,3,4) //207
- apply的实例
//与call对比，仅仅是调用参数的方式不同
fn4.apply(obj4,[3,4]) 207
更多用法
function joinStr(){
console.log(Array.prototype.join.call(arguments)) //a,b,c
console.log(Array.prototype.join.call(arguments,'-')) //a-b-c
var join = Array.prototype.join.bind(arguments)
console.log(join('-')) //a-b-c
}
joinStr('a','b','c')
得到一个数组的最大值和最小值
var arr = [1,3,5,9]
console.log(Math.max.apply(null,arr)) //9
console.log(Math.max.call(null,arr)) //NAN
console.log(Math.max.call(null,1,3,5,9)) //9
call与apply的不同之处：
- apply:
最多只能有两个参数：新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如果argArry不是一个有效的数组或者不是arguments对象，那么将导致一个TypeError。如果没有提供argArry和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。 - call：
则是直接的参数列表，主要用在JS对象各方法互相调用的时候，使当前this实例指针保持一致或在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么Global对象将被用作thisObj。
caller
在函数A调用函数B时，被调用函数B会自动生成一个caller属性，指向调用它的函数对象，如果函数当前未被调用，或并非被其他函数调用，则caller为null
function fn(){
function fn1(){
console.log(fn1.caller) //fn
}
fn1()
}
fn()
arguments
- 在函数调用时，会自动在该函数内部生成一个名为 arguments的隐藏对象
- 该对象类似于数组，可以使用[]运算符获取函数调用时传递的实参
- 只有函数被调用时，arguments对象才会创建，未调用时其值为null
function fn(name,age){
console.log(arguments)
var name = "frank"
console.log(arguments)
arguments[1] = 14
console.log(arguments)
}
fn('lili',23)
函数的执行环境
一个函数被执行时，会创建一个执行环境（ExecutionContext），函数的所有的行为均发生在此执行环境中，构建该执行环境时，JavaScript 首先会创建 arguments变量，其中包含调用函数时传入的参数
接下来创建作用域链，然后初始化变量。首先初始化函数的形参表，值为 arguments变量中对应的值，如果 arguments变量中没有对应值，则该形参初始化为 undefined。
如果该函数中含有内部函数，则初始化这些内部函数。如果没有，继续初始化该函数内定义的局部变量，需要注意的是此时这些变量初始化为 undefined，其赋值操作在执行环境（ExecutionContext）创建成功后，函数执行时才会执行，这点对于我们理解JavaScript中的变量作用域非常重要，最后为this变量赋值，会根据函数调用方式的不同，赋给this全局对象，当前对象等
至此函数的执行环境（ExecutionContext）创建成功，函数开始逐行执行，所需变量均从之前构建好的执行环境（ExecutionContext）中读取
三种变量
- 实例变量：（this）类的实例才能访问到的变量
- 静态变量：（属性）直接类型对象能访问到的变量
- 私有变量：（局部变量）当前作用域内有效的变量
function fn(){
var a = 1 //局部变量
this.b = 3 //实例变量
}
fn.c = 5 //静态变量
原型链
- 代码示例：
function Person(name,age){
this.name = name;
this.age = age
}
Person.prototype.sayName = function(){
console.log(this.name)
}
var p1 = new Person('lili',1);
var p2 = new Person('llll',3);
p1.sayName()
p2.sayName()
-
原型图
捕获.PNG
p1.__proto__.constructor === Person
Person.prototype.constructor === Person
p1.constructor === Person
- 我们通过函数定义了类
Person，类（函数）自动获取属性prototype - 每个类的实例都会有一个内部属性
__proto__，指向类的prototype·
如果想看某一个对象xx是由谁创建的，只需要看xx.proto.constructor === y,就由y创建。
原型链相关问题
有如下代码，解释Person、 prototype、proto、p、constructor之间的关联。
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
- 通过函数定义了类Person，类（函数）自动获取属性prototype；
- 每个类的实例都会有一个内部属性
__proto__，指向类的prototype； - P是构造函数Person的一个实例，p的
__proto__指向了Person的prototype属性； - prototype是构造函数内部的原型函数，所以拥有prototype和
__proto__属性，其中contructor属性指向构造函数Person，__proto__指向该对象的原型。
上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
p.toString()方法是继承构造函数Object的原型对象里定义的toString()方法，首先p会找到自己的toString()方法，如果没有找到，会沿着__proto__属性继续到构造函数Person的prototype里找toString()方法，如果还是未找到，再继续往Person.prototype的__proto__找。
QQ图片20171018133901.png
原型链：由于原型对象本身也是对象，而每个JavaScript对象都有一个原型对象，每个对象都有一个隐藏的proto属性，原型对象也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链。在访问对象的属性时，如果在对性本身中没有找到，则会去原型链中查找，如果找到，则返回值，如果整个链都没有找到，则返回undefined。
instanceOf有什么作用？内部逻辑是如何实现的？
instanceOf：判断一个对象是否为另一个对象的实例
//
function isInstanceOf(obj,fn){
var oldProto = obj.__proto__;
do{
if(oldProto === fn.prototype){ //prototype是小写的！
return true;
}else{
oldProto = oldProto.__proto__;
}
}while(oldProto){
return false;
}
}
网友评论