一、实际场景中抽象出的一个问题
下面this各指向什么?
var a = { b: function() { console.log(this); }, f: function() { var c = this.b; c(); } }; a.b(); a.f();
第一个this指向a,第二个this指向window。(做对了吗)
二、JavaScript中变量复制的问题
变量拷贝分为值拷贝和引用类型数据拷贝
一个变量向另一个变量复制基本类型数据值时,另一个变量会在自己所占的内存中保存一份属于自己的数据值。
一个变量向另一个变量复制引用类型数据值时,实质上复制的是一个指针变量,这个指针指向堆内存中的对象,复制之后这两个变量指向同一个对象。
Es5中基本数据类型包括string、number、null、undefined、boolean
引用类型包括Array、RegExp、Date、Function等
( 基本包装类型:String、Boolean、Number; 单体内置对象:Global、Math)
三、函数
创建一个函数的方式: 函数声明、函数表达式、通过Function构造函数创建,它接受任意数量的参数,最后一个参数始终被看成是函数体。
(例如:new Function(“num1”, “num2”, “return num1+num2”))
函数声明有声明提升的过程,解析器在向执行环境中加载数据时会优先读取函数声明,保证它在执行任何代码之前都可用,而函数表达式则是在解析器
执行到它所在的代码行时才被解析执行。
var condition = false; console.log( afun(100) );//undefined if (condition) { function afun(num) { return num + 100; } } else { function afun(num) { return num + 200; } }
上面的代码,函数调用之前还没有做判断,所以还没有afun函数
var condition = false; if (condition) { function afun(num) { return num + 100; } } else { function afun(num) { return num + 200; } } console.log( afun(100) );//300
js中没有块级作用域的概念,上面的代码可以正常调用
js中函数也是一个对象,函数名是一个指针,所以在将一个函数的函数名复制给另一个变量时,这个变量也指向了这个函数
if (condition) { var bfun = function(num) { return num + 100; } } else { var bfun = function(num) { return num + 200; } } var cfun = bfun; bfun = null; // console.log( bfun(100) );//报错 console.log( cfun(200) );//400
验证函数拷贝之后,被赋值的变量和赋值的变量指向的是同一个函数,函数表达式和函数声明定义的函数在复制时是一样的,复制之后两个变量指向同一函数。
复制之后,添加新的bfun,这个新的bfun覆盖原来的bfun,cfun同样也改变了,说明被赋值的变量和赋值的变量指向的是同一个函数。
function bfun(num) { return num + 200; } var cfun = bfun; function bfun(num) { return num*1000; } ; console.log( bfun(100) );//100000 console.log( cfun(200) );//200000
但是当采用函数表达式的形式(在用函数表达式定义的bfun函数,bfun也是一个全局变量,这里没有用var定义变量,规范写法应该加上var) 再次定义一个同名的函数时,
如下:
function bfun(num) { return num + 200; } var cfun = bfun; bfun = function(num) { return num*1000; } ; console.log( bfun(100) );//100000 console.log( cfun(200) );//300
函数表达式定义的函数没有覆盖函数声明定义的同名函数,在JavaScript中函数也是一个对象,函数名是一个指向函数的的变量指针,函数名也是一个变量,
在JavaScript中有一条规则是,函数声明会覆盖和其函数名同名的变量的声明,但是不会覆盖同名的变量的赋值,不管它们定义的顺序如何。在用函数表达式定
义的bfun函数中,bfun也是一个变量,只不过它被赋的值是一个匿名函数,一个变量的值可以是任何类型(string、number、boolean、null、undefined、一个
函数、一个复杂类型数据(对象)等)。
验证:函数声明会覆盖和其函数名同名的变量的声明,但是不会覆盖同名变量的赋值
bfun = function(num) { return num*1000; } ; var cfun = bfun; function bfun(num) { return num + 200; } console.log( bfun(100) );//100000 console.log( cfun(200) );//200000
再看一段代码,最后结果为多少?
bfun = function(num) {
return num*1000; } ; var cfun = bfun; bfun = function(num) { return num + 200;
} console.log( bfun(100) ); console.log( cfun(200) );
最后结果为300、2000,后面的bfun覆盖了前面的bfun,在后面调用bfun时调用的是第二个,而cfun仍然为第一个bfun的值,why?
不是说函数是一个对象,函数名相当于一个指针,指向的是函数,在复制之后两个变量会指向同一个函数吗?
当bfun是采用函数声明的形式定义的时候,后面函数声明定义一个相同的同名函数之后,bfun改变,cfun会随之改变。而这里的bfun是采用函数表达式定义的函数,
又会有什么不同?
我的理解是,函数表达式定义的函数是没有函数名的,在复制的时候复制的是一个具体值,这里复制的就是一个匿名函数,而不是像函数声明复制一样复制的是一个
内存地址(指针),
函数表达式拷贝,就等同于基本数据类型变量拷贝,变量与变量之间各保存了一份属于自己的值,其中一个变量的值改变不会影响另外一个。
函数的内存分配(无论是函数声明还是函数表达式定义的函数):
函数表达式与函数声明不同的是,bfun再重新被赋值一个匿名函数之后,此时bfun指向一个新的对象(有点类似于原型上采用字面量的方式定义属性和方法一样,
此时指向的是一个新对象),cfun还是指向原来的匿名函数。也就是函数声明方式定义的函数,定义同名的函数,同名函数会覆盖原来的函数;而函数表达式定义
的函数不会被同名函数覆盖,定义同名函数之后原来的函数仍然存在。
函数是一个对象,所以可以在函数名上定义属性和方法:
bfun = function(num) { return num*1000; } ; var cfun = bfun; bfun.a = 7777; console.log(bfun.a);//777 bfun.b = function(num) { return num + 200; } console.log(typeof bfun);//function console.log(bfun.a);//777 console.log( bfun(100) ); //10000 console.log( bfun.b(100) ); //300
验证:函数表达式定义的函数不会被同名函数覆盖,定义同名函数之后原来的函数仍然存在。
bfun = function(num) { return num*1000; } ; var cfun = bfun; bfun.a = 7777; console.log(bfun.a);//777 bfun = function(num) { return num + 200; } console.log(typeof bfun);//function console.log(bfun.a);//undefined console.log( bfun(100) ); //300 console.log( cfun(200) );//200000 console.log(cfun.a);//777
函数是一个对象,所以可以在函数对象上添加属性和方法,这样看似乎对象不一定就是存储在堆内存中了?函数表达式中的匿名函数这样的函数对象就是存在栈中啊
函数名是一个指针,指向函数,函数是一个对象,存在堆内存中。
四、闭包
var a = {
b: function() {
console.log(this);
},
f: function() {
var c = this.b;
c();
}
};
a.b();
a.f();
通过上面的分析,c这里和b指向的是同一个函数,但是为什么this的指向不同?问题在于调用(直接调用b时this为a,在f中将b复制给c之后,在调用c,this指向window)
函数的方式不一样,结果执行环境也不同。
这个例子实质上类似于(this===window):
var object = { _name : "my object", getNameFunc : function() { var that = this; var a = function() { console.log("value:"+this._name);//undefined }; a(); } }; console.log(object.getNameFunc());
同样也类似于(this===window):
var object = { _name : "my object", getNameFunc : function() { return function() { // this._name = "yyy"; console.log(this);//window return this._name;//undefined }; } }; console.log(object.getNameFunc()());
上面三个例子都是在函数中创建了一个闭包函数
闭包: 一个有权访问另一个函数中的变量的函数就是闭包,常见的闭包就是一个函数中包含另一个函数
函数没有利用对象调用时,this指向window;以上 闭包中的this指向window,这又引申到this指向的问题。
五、this的指向问题 (见:https://www.zhihu.com/question/19636194)
调用函数的几种方式以及当前this的指向问题:
直接通过函数名调用(无论是在哪里调用),此时this指向window
通过对象点函数名的形式调用,this指向函数的直接调用者
new关键字调用构造函数,this指向new出来的这个对象
通过apply或call方法调用,this指向第一个参数中的对象,如果第一个参数为null,this指向window
还可以通过bind()方法来改变函数的作用域,它返回的是一个函数的实例,最终需要通过这个实例来调用函数(apply和call方法是直接调用函数)
通过apply和call方法用来改变函数的作用域,这是每个函数中都包含的两个非继承的方法。
function a(num, num2) { }
当通过函数名直接调用一个函数时a(1,2),这个相当于a.apply(null, arguments),第一个参数是为null,所以this指向window
var b = { function a(num, num2) { } }
当通过对象调用一个函数时b.a(1,2),这个相当于a.apply(b, arguments),第一个参数是为b,所以this指向b
当把调用函数的方法换写成apply或call的形式就很好理解this的指向了
关于直接调用函数和通过new关键调用构造函数的区别,如下:
考察不同调用方式this的指向问题和变量提升的问题
var a=10; function test(){ a=5; alert(a); alert(this.a); var a; alert(this.a); alert(a); } test(); new test(); // 5 10 10 5 //5 undefined undefined 5
test()方法,this指向window,test中用var定义了一个a,它将被提升到执行环境的最前端,a=5
new test(),此时test是个构造函数,this.a没有被定义所以为undefined
总结:
上面的问题的实际场景如下:
实际项目中抽象出来的一部分,用来统一给dom元素添加事件的写法,大大提升了代码的可维护性
var util = { maps: { 'click #btn': 'clickBtn' }, stop: function() { console.log("stop...."); }, clickBtn: function(event) { var e = event; var target = e.target || e.srcElement; console.log(target.id); this.stop(); }, _scanEventsMap: function(maps, isOn) { var delegateEventSplitter = /^(\S+)\s*(.*)$/; var bind = isOn ? this._delegate.bind(this) : this._undelegate.bind(this); // this._delegate('click', "#btn", this["clickBtn"]); // bind('click', "#btn", "clickBtn"); for (var keys in maps) { if (maps.hasOwnProperty(keys)) { var matchs = keys.match(delegateEventSplitter); bind(matchs[1], matchs[2], maps[keys]); } } }, _delegate: function(name, selector, func) { var ele = document.querySelector(selector), that = this, func = this[func]; console.log(func); ele.addEventListener(name, function(event) { var e = event || window.event; func.apply(that, arguments); }, false); }, _undelegate: function(name, selector, func) { var ele = $(selector); ele.removeEventListener(name, func, false); }, _init: function() { this._scanEventsMap(this.maps, true); } } util._init();