
原文出处:https://segmentfault.com/a/1190000010371988
看了一下这篇文章,自己也手敲了一遍
//1、 立即执行函数 作用:将var变量的作用域限制于函数内,这样可以避免命名冲突。注意:避免报错 在开头加分号 ;
(function() {
console.log("1、立即执行函数")
})() //2、闭包
;
(function() {
console.group("2、闭包") function f1() {
var n = 0 function f2() {
n++
console.log("n=" + n)
}
return f2
}
var result = f1() try {
console.log(n) //undefind
} catch(e) {
// console.log(e)
} result() //输出1
result() //输出2
result() //输出3
console.groupEnd()
})() //3、使用闭包定义私有变量 ;
(function() {
console.group("3、使用闭包定义私有变量") function Pronduct() {
// this.name = "mike";
var name this.setName = function(v) {
name = v
}
this.getName = function() {
return name
}
} var k = new Pronduct()
k.setName('amy')
console.log(k.name) //undefined
console.log(k.getName()) //输出amy
console.groupEnd()
})() //4、prototype
//每个JavaScript构造函数都有一个prototype属性,用于设置所有实例对象需要共享的属性和方法。
//prototype属性不能列举。JavaScript仅支持通过prototype属性进行继承属性和方法。 ;
(function() {
console.group("4.prototype") function Rectangle(x, y) {
this._length = x;
this._breadth = y;
}
Rectangle.prototype.getData = function() {
return {
length: this._length,
breadth: this._breadth
}
}
var x = new Rectangle(3, 4);
var y = new Rectangle(5, 8);
console.log(x.getData()) //输出{length:3,breadth:4}
console.log(y.getData()) //输出{length:5,breadth:8}
console.groupEnd()
})() //5、模块化
;
(function() {
console.group("5.模块化")
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 descriptione",
add: add
}
})() console.log(module.description) //输出 "This is descriptione"
module.add(5) //输出 The result is:10
console.groupEnd()
})() //6.变量提升 //JavaScript会将所有变量和函数声明移动到它的作用域的最前面,这就是所谓的变量提升(Hoisting)。
//也就是说,无论你在什么地方声明变量和函数,
//解释器都会将它们移动到作用域的最前面。因此我们可以先使用变量和函数,而后声明它们。 //7、柯里华
//柯里化,即Currying,可以是函数变得更加灵活。我们可以一次性传入多个参数调用它;
//也可以只传入一部分参数来调用它,让它返回一个函数去处理剩下的参数。
;
(function() {
console.group('7.柯里华')
var add = function(x) {
return function(y) {
return x + y;
}
}
console.log(add(1)(1)) //输出2
var add1 = add(1)
console.log(add1(2)) //输出3
var add10 = add(10)
console.log(add10(2)) //输出12
console.groupEnd()
})() //8.apply,call与bind方法
//call 指定this值调用函数
;
(function() {
console.group('8.apply,call与bind方法')
var user = {
name: "mike",
whatIsYourName: function() {
console.log(this.name)
} }
console.group("call")
user.whatIsYourName() //输出 mike var user2 = {
name: "amy"
}
user.whatIsYourName.call(user2) //输出amy
console.groupEnd() //apply apply方法与call方法类似。两者唯一的不同点在于,apply方法使用数组指定参数,而call方法单独指定:
;
(function() {
console.group('apply')
var user = {
greet: "hello",
greetUser: function(userName, name) {
console.log(this.greet + " " + userName + ' ' + name)
}
}
var user2 = {
greet: "hey"
} user.greetUser.call(user2, 'mike', "ak") //输出 hey mike ak
user.greetUser.apply(user2, ['amy', "ak"]) //输出 hey amy ak
console.groupEnd()
})()
//bind
;
(function() {
console.group('bind')
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"
user.greetUser('mike')
console.groupEnd()
})() })()