1 立即执行函数
创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作。
(function(){
//代码
})()
匿名函数外面的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了该函数表达式。应用:将var变量的作用域限制于函数内,可以避免命名冲突。
2 闭包
当外部函数返回之后,内部函数仍可以访问外部函数的变量。
function f1(){
var N=0;
function f2(){
N+=1;
console.log(N);
}
return f2;
}
var result=f1();
result();//1
result();//2
result();//3
闭包导致变量一直存在内存中,因此,当再次调用到该变量时,会取得上次保存的变量值。
使用闭包定义私有变量:
function Product(){
var name;
this.setName=function(value){
name=value;
};
this.getName=function(){
return name;
};
}
var p=new Product();
p.setName("Fundebug");
console.log(p.name);//undefined
console.log(p.getName());//Fundebug
其中,对象p的name属性为私有属性,使用p.name不能直接访问。
3 prortotype
每个JavaScript构造函数都有一个prototype属性,用于设置实例对象可以共享的属性和方法。Prototype属性不能枚举。JavaScript仅支持通过prototype属性进行继承属性和方法。
function Rectangle(x,y){
this._length=x;
this._breadth=y;
}
Rectangle.prototype.getDimensions=function(){
return {
length:this._length,
breadth:this._breadth
};
};
var x=new Rectangle(3,4);
var y=new Rectangle(4,3);
console.log(x.getDimensions());//{ length: 3, breadth: 4 }
console.log(y.getDimensions());//{ length: 4, breadth: 3 }
4 模块化
模块化,根据需要控制模块内属性与方法的可访问性,即私有或公开。其中,立即执行函数可以实现模块化。
var module=(function(){
var N=5;//私有属性
function print(x){ //私有方法
console.log("the result is:"+x);
}
function add(a){
var x=a+N;
print(x);
}
return {
description:"this is description", //公有属性
add:add //公有方法
};
})();
console.log(module.description); //this is description
//console.log(module.add(5));
module.add(5); //the result is:10
5 变量提升
JavaScript会把所有变量和函数移动到其作用域的最前面,即变量提升。Ps:提升的仅仅是变量或函数声明,而赋值操作不会提升。
console.log(y);//undefined
var y=2;
console.log(x);//x is not defined
x=2;
6 柯里化
柯里化,函数可以更灵活,作参数及返回值等。可以一次性传入多个参数调用它,也可只传入一部分参数来调用它,让其返还一个函数继续处理剩下的参数。
var add=function(x){
return function(y){
return x + y;
};
};
console.log(add(1)(1));//2
var add1=add(1);
console.log(add1(1));//2
var add10=add(10);
console.log(add10(1));//11
可以一次性传入2个1作为参数add(1)(1),也可以传入一个参数之后获取add1与add10函数。
7 apply、call、bind
第一个参数都为你函数执行时依赖的上下文。
var user={
name:"Rah Mhar",
getName:function(){
console.log(this.name);
}
};
user.getName();//Rah Mhar
var user2={
name:"jhsl"
};
user.getName.call(user2);//jhsl
ps:
apply(thisArg, [argsArray])
call(thisArg, arg1, arg2, …)
或
var user={
greet:"hello",
greetUser:function(userName){
console.log(this.greet+" "+userName);
}
};
var greet1={
greet:"Lksfl"
};
user.greetUser.call(greet1,"Fskds");//Lksfl Fskds
user.greetUser.apply(greet1,["Fskds"]);//Lksfl Fskds
或
var user={
greet:"hello",
greetUser:function(userName){
console.log(this.greet + " " + userName);
}
};
var greetHola=user.greetUser.bind({greet:"Hola"});
var greetBonjour=user.greetUser.bind({greet:"Bonjour"});
greetHola("Rahul");//Hola Rahul
greetBonjour("Rahul");//Bonjour Rahul
学习 & 感谢 https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/