10个JavaScript难点
闲暇⽆事，就根据⾃⼰在学习JavaScript过程中认为⽐较难的地⽅进⾏了⼀下总结，以便在⽇后的⼯作和学习中遇到类似的问题能够快速的应对，也希望⼤佬们多指正。
1. ⽴即执⾏函数
⽴即执⾏函数，即Immediately Invoked Function Expression (IIFE)，正如它的名字，就是创建函数的同时⽴即执⾏。它没有绑定任何事件，也⽆需等待任何异步操作：
（function(){
执⾏代码...
}）()
function(){…}是⼀个匿名函数，包围它的⼀对括号将其转换为⼀个表达式，紧跟其后的⼀对括号调⽤了这个函数。⽴即执⾏函数也可以理解为⽴即调⽤⼀个匿名函数。⽴即执⾏函数最常见的应⽤场景就是：将var变量的作⽤域限制于你们函数内，这样可以避免命名冲突。
2. prototype
每个JavaScript构造函数都有⼀个prototype属性，⽤于设置所有实例对象需要共享的属性和⽅法。prototype属性不能列举。JavaScript仅⽀持通过prototype属性进⾏继承属性和⽅法。
function Animal(name,age){
this.name=name;
this.age = age;
}
Animal.prototype.hobby = function(x){
return(
this.name+this.age+"岁爱好"+x
)
}
var a1 = new Animal("阿黄","2")
console.log(a1.hobby("⾁"))//阿黄2岁爱好⾁
var a2 =new Animal("⼩花",1)
console.log(a2.hobby("鱼"))//⼩花1岁爱好鱼
代码中，name和age都是构造函数Animal创建的对象实例，它们通过prototype继承了hobby⽅法。详细讲起来javscript的构造函数和继承⽅式也不是三⾔两语能够将完的，在这⾥我就不细说了。
3. 闭包
对于闭包(closure)，当外部函数返回之后，内部函数依然可以访问外部函数的变量。
function f1()
{
var N = 0;
// N是f1函数的局部变量
function f2()
// f2是f1函数的内部函数，是闭包
{
N += 1;
// 内部函数f2中使⽤了外部函数f1中的变量N
console.log(N);
}
return f2;
}
var result = f1();
result(); // 输出1
result(); // 输出2
result(); // 输出3
代码中，外部函数f1只执⾏了⼀次，变量N设为0，并将内部函数f2赋值给了变量result。由于外部函数f1已经执⾏完毕，其内部变量N应该在内存中被清除，然⽽事实并不是这样：我们每次调⽤result的时候，发现变量N⼀直在内存中，并且在累加。还是不懂的话，可以参考我的另⼀篇关于闭包的⽂章，地址：
4. 使⽤闭包定义私有变量
通常，JavaScript开发者使⽤下划线作为私有变量的前缀。但是实际上，这些变量依然可以被访问和修改，并⾮真正的私有变量。这时，使⽤闭包可以定义真正的私有变量：
function Product() {
var name;
this.setName = function(value) {
name = value;
};
return name;
};
}
var p = new Product();
p.setName("Fundebug");
console.log(p.name);
// 输出undefined
console.Name());
// 输出Fundebug
代码中，对象p的的name属性为私有属性，使⽤p.name不能直接访问。
5. 模块化
JavaScript并⾮模块化编程语⾔，⾄少ES6落地之前都不是。然⽽对于⼀个复杂的Web应⽤，模块化编程是⼀个最基本的要求。这时，可以使⽤⽴即执⾏函数来实现模块化，正如很多JS库⽐如jQuery以及我们Fundebug都是这样实现的。
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"
module.add(5);
// 输出“The result is: 10”
所谓模块化，就是根据需要控制模块内属性与⽅法的可访问性，即私有或者公开。在代码中，module为⼀个独⽴的模块，N为其私有属性，print为其私有⽅法，decription为其公有属性，add为其共有⽅法。
6. 变量提升
JavaScript会将所有变量和函数声明移动到它的作⽤域的最前⾯，这就是所谓的变量提升(Hoisting)。也就是说，⽆论你在什么地⽅声明变量和函数，解释器都会将它们移动到作⽤域的最前⾯。因此我们可以先使⽤变量和函数，⽽后声明它们。
但是，仅仅是变量声明被提升了，⽽变量赋值不会被提升。如果你不明⽩这⼀点，有时则会出错：
console.log(y);
// 输出undefined
y = 2;
// 初始化y
上⾯的代码等价于下⾯的代码：
var y;
// 声明y
console.log(y);
// 输出undefined
y = 2;
// 初始化y
为了避免BUG，开发者应该在每个作⽤域开始时声明变量和函数。不过es6新添加了定义变量的⽅法let，不会出现⽤var定义变量产⽣变量提升的情况。有兴趣的⼩伙伴可以⾃⾏查阅。
7. apply, call与bind⽅法
JavaScript开发者有必要理解apply、call与bind⽅法的不同点。它们的共同点是第⼀个参数都是this，即函数运⾏时依赖的上下⽂。
三者之中，call⽅法是最简单的，它等价于指定this值调⽤函数：
var user = {
name: "Rahul Mhatre",
whatIsYourName: function() {
console.log(this.name);
}
};
user.whatIsYourName();
// 输出"Rahul Mhatre",
var user2 = {
name: "Neha Sampat"
};
user.whatIsYourName.call(user2);
// 输出"Neha Sampat"
apply⽅法与call⽅法类似。两者唯⼀的不同点在于，apply⽅法使⽤数组指定参数，⽽call⽅法每个参数单独需要指定：apply(thisArg, [argsArray])
call(thisArg, arg1, arg2, …)
var user = {
greet: "Hello!",
greetUser: function(userName) {
console. + "" + userName);
}
};
var greet1 = {
greet: "Hola"
};
// 输出"Hola Rahul"
// 输出"Hola Rahul"
使⽤bind⽅法，可以为函数绑定this值，然后作为⼀个新的函数返回：
var user = {
greet: "Hello!",
greetUser: function(userName) {
console. + "" + userName);
}
};
var greetHola =
var greetBonjour =
greetHola("Rahul")
// 输出"Hola Rahul"
greetBonjour("Rahul")
// 输出"Bonjour Rahul"
总结⼀句话，bind⽅法返回的是⼀个修改后的函数，bind也可以有多个参数，并且参数可以执⾏的时候再添加，参数是按照形参的顺序执⾏的；call和apply都是改变上下⽂中的this并执⾏这个函数，第⼀个参数是要借⽤的对象，不同的是call可以有许多个参数，apply第⼆个参数必须是⼀个数组。
8. 柯⾥化
柯⾥化，即Currying，可以是函数变得更加灵活。我们可以⼀次性传⼊多个参数调⽤它；也可以只传⼊⼀部分参数来调⽤它，让它返回⼀个函数去处理剩下的参数。
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)，也可以传⼊1个参数之后获取add1与add10函数，这样使⽤起来⾮常灵活。
9. Memoization
Memoization⽤于优化⽐较耗时的计算，通过将计算结果缓存到内存中，这样对于同样的输⼊值，下次只需要中内存中读取结果。
function memoizeFunction(func)
{
var cache = {};
return function()
{
var key = arguments[0];
if (cache[key])
{
return cache[key];
}
else
{
var val = func.apply(this, arguments);
cache[key] = val;
return val;
}
};
}
var fibonacci =
memoizeFunction(function(n)
{
return (n === 0 || n === 1) ?
n : fibonacci(n - 1) + fibonacci(n - 2);
});
console.log(fibonacci(100));
// 输出354224848179262000000
console.log(fibonacci(100));
// 输出354224848179262000000
代码中，第2次计算fibonacci(100)则只需要在内存中直接读取结果。
10. 函数重载
所谓函数重载(method overloading)，就是函数名称⼀样，但是输⼊输出不⼀样。或者说，允许某个函数有各种不同输⼊，根据不同的输⼊，返回不同的结果。凭直觉，函数重载可以通过if…else或者switch实现，这就不去管它了。jQuery之⽗John Resig提出了⼀个⾮常巧(bian)妙(tai)的⽅法，利⽤了闭包。
从效果上来说，people对象的find⽅法允许3种不同的输⼊: 0个参数时，返回所有⼈名；1个参数时，根据firstName查⼈名并返回；2个参数时，根据完整的名称查⼈名并返回。
难点在于，people.find只能绑定⼀个函数，那它为何可以处理3种不同的输⼊呢？它不可能同时绑定3个函数find0,find1与find2啊！这⾥的关键在于old属性。
由addMethod函数的调⽤顺序可知，people.find最终绑定的是find2函数。然⽽，在绑定find2时，old为find1；同理，绑定find1时，old为find0。3个函数find0,find1与find2就这样通过闭包链接起来了。
根据addMethod的逻辑，当f.length与arguments.length不匹配时，就会去调⽤old，直到匹配为⽌。
function addMethod(object, name, f)
{ 
var old = object[name]; 
object[name] = function()
{
// f.length为函数定义时的参数个数
// arguments.length为函数调⽤时的参数个数   
if (f.length === arguments.length)
{ 
return f.apply(this, arguments);   
}
else if (typeof old === "function")
{javascript 函数
return old.apply(this, arguments);   
} 
};
}
// 不传参数时，返回所有name
function find0()
{ 
return this.names;
}
// 传⼀个参数时，返回firstName匹配的name
function find1(firstName)
{ 
var result = []; 
for (var i = 0; i < this.names.length; i++)
{   
if (this.names[i].indexOf(firstName) === 0)
{     
result.push(this.names[i]);   
} 
} 
return result;
}
// 传两个参数时，
返回firstName和lastName都匹配的name
function find2(firstName, lastName)
{　
var result = []; 
for (var i = 0; i < this.names.length; i++)
{   
if (this.names[i] === (firstName + "" + lastName))
{     
result.push(this.names[i]);   
} 
} 
return result;
}
var people = { 
names: ["Dean Edwards",
"Alex Russell", "Dean Tom"]
};
addMethod(people, "find", find0);
addMethod(people, "find", find1);
addMethod(people, "find", find2);
console.log(people.find());
// 输出["Dean Edwards",
"Alex Russell", "Dean Tom"]
console.log(people.find("Dean"));
// 输出["Dean Edwards", "Dean Tom"]
console.log(people.find("Dean", "Edwards"));
// 输出["Dean Edwards"]
简单的⼀些总结，和平时的⼀些笔记的整理，错误的地⽅还请⼤佬指点出来，更有利与我的学习

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。