JavaScript知识点小记1
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/
宝剑锋从磨砺出,梅花香自苦寒来。