1.1 作用域
变量的作用域:局部作用域,全局作用域;
如:
$(function () {
var f1 = function() {
cat = "cat";
var dog = "dog";
f2 = function() {
console.info("f2:inner:"+dog);
}
}
f1();//必须调用,载入函数中的变量
console.info(cat);
f2();
console.info(dog);
});
输出结果:
cat
f2:inner:dog
分析:
dog为局部作用域,只能在f1内部子函数中访问。
cat为全局作用域
1.2 闭包
1.2.1 闭包的概念
闭包就是定义在一个函数内部的函数,只有函数内部的子方法才能访问该函数的属性。
1.2.2 闭包用途
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
// 去除闭包
(function(n){
alert("remove:"+n)
})(n);
return f2;
}
var result=f1();// remove:999
result(); // 999
nAdd();
f1()// remove:999
result(); // 1000
在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。
这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,
因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,
因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),
而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。
1.3 原型链
***概念:***实例对象,构造方法,原型对象
$(function(){
// 实例对象,构造方法,原型对象
// 构造方法
var Cat = function() {
// 实例方法
this.init1 = function() {
console.log('1')
},
// 全局方法
init2 = function() {
console.log('2')
}
}
// 原型对象
Cat.prototype.init3 = function() {
console.log("3")
}
$.extend({
// 实例对象
cat:new Cat()
});
$.cat.init1();
init2();
$.cat.init3();
Cat.prototype.init3();
Cat.init3();// 异常
// 构造方法.propotype = 原型对象
// 原型对象.constructor = 构造方法
console.info(Cat.prototype.constructor == Cat) =>true
// new 构造方法 = 实例对象
// 实例对象.__proto__ = 原型对象
console.info(Cat.prototype == new Cat().__proto__)=>true
输出结果:
1
2
true
true
1.4 JS中(function§{})(param);
作用:
- 使这段代码被载入时候自动执行。
- 避免污染全局变量。
JS中(function§{})(param);其实就等于
var fn = function(p){....};
fn(param);
其实可以这么理解,不过要注意的是fn是不存在的
那个函数直接定义,然后就运行了。就“压缩”成下面的样子了
jquery中
(function($){…})(jQuery)用来定义一些需要预先定义好的函数
$(function(){ })则是用来在DOM加载完成之后运行\执行那些预行定义好的函数.
1.5 jQuery插件基本知识
1.5.1 jQuery中的构造方法和实例对象
- 构造方法:jQuery= = w i n d o w . =window. =window.=function(){}
- 实例对象: $("")
1.5.2 $.fn.extend和$.extend
- $.fn=$.prototype
- $.extend=$.fn.extend
当$.extend传递一个对象将把对象挂在到$函数上,当传递多个对象,将挂在到第一个对象上
当$.fn.extend传递一个对象把对象挂在到$.fn原型上,当传递多个对象,将挂在到第一个对象上
1.5.3 支持链式调用
我们都知道jQuery一个时常优雅的特性是支持链式调用,选择好DOM元素后可以不断地调用其他方法。
要让插件不打破这种链式调用,只需return一下即可。
`$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
this.css('color', 'red');
return this.each(function() {
//对每个元素进行操作
$(this).append(' ' + $(this).attr('href'));
}))
}`