2018-12-04 第14天总结

2018-12-05  本文已影响0人  一片落叶就是渺小
  1. 声明/匿名函数
    当声明函数没有 name 的时候,便成了匿名函数(name)。作为 first-class object,像其他对象一样,它也可以作为值传递给一个变量,作为函数的参数。

js 代码:

function[name]([arg1][, arg2][..., argN]){
     statements
}
  1. Function 构造函数
    js 代码:
newFunction([arg1][, arg2][..., argN], statement);

以上面的形式为例,在函数体内我们可以直接使用的有:

参数:可以像变量(argN)一样在函数体中使用
函数名:可以用函数名或者 arguments.callee 调用自身
上下文:每一个函数体,都是一个作用域,this 代表当前作用域上下文
参数对象:arguments 对象按顺序存储着函数变量

让我们直观一点,用一个代码片断来描述上面的内容:
js 代码:

function sofish(gender, age){
  console.log(gender, age);// male, 28
  console.log(sofish === arguments.callee)// true
  console.log(this);// window
  console.log(arguments);// ['male', 28]
}

闭包
什么是闭包?闭包有什么作用?
闭包是指有权访问另一个函数作用域中的变量的函数。
那么闭包的作用也就很明显了。

  1. 可以在函数的外部访问到函数内部的局部变量。
  2. 让这些变量始终保存在内存中,不会随着函数的结束而自动销毁。
<script>
    function  outer(){
        var num=0;//内部变量
       return  function add(){//通过return返回add函数,就可以在outer函数外访问了。
            num++;//内部函数有引用,作为add函数的一部分了
           console.log(num);
        };
    }
    var func1=outer();//
    func1();//实际上是调用add函数, 输出1
    func1();//输出2
    var func2=outer();
    func2();// 输出1
    func2();// 输出2
</script>

js创建对象的方法
一原始方式

[javascript] 
var Car = new Object();  
Car.color = "blue";  
Car.doors = 4;  
Car.mpg = 25;  
Car.showColor = function() {  
    return this.color;  
 };  
document.write(Car.showColor());//输出:blue 

在上面的代码中,创建对象Car。然后给它设置几个属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象Car。不过这里有一个问题,就是可能需要创建多个Car的实例,这样就造成了我们会重复许多类似的代码,这样会很麻烦。
二工厂方式
要解上述的多个类似对象声明的问题,开发者创造了能创建并返回特定类型的对象的工厂方式。这种方式就是为了解决实例化对象产生大量重复的问题。
(1)无参数的工厂方式
例如,函数createCar()可用于封装前面列出的创建Car对象的操作:

[javascript]

1. function createCar() {  

2. var TempCar = new Object();  

3. TempCar.color = "blue";  

4. TempCar.doors = 4;  

5. TempCar.mpg = 25;  

6. TempCar.showColor = function() {  

7.        return this.color;  

8.   };  

9.   return TempCar;  

10. };  

11. var Car1 = createCar();  

12. var Car2 = createCar();  

13. document.write(Car1.showColor()+"<br/>");//输出:blue  

14. document.write(Car2.showColor());//输出:blue 

(2)有参数的工厂方式
我们还可以修改createCar()函数,给它传递各个属性的默认值,而不是简单地赋予属性默认值:

[javascript]

1. function createCar(Color,Doors,Mpg) {  

2.   var TempCar = new Object();  

3.   TempCar.color = Color;  

4.   TempCar.doors = Doors;  

5.   TempCar.mpg = Mpg;  

6.   TempCar.showColor = function() {  

7.        return this.color;  

8.   };  

9.   return TempCar;  

10. };  

11. var Car1 = createCar("red",4,23);  

12. var Car2 = createCar("blue",3,25);  

13. document.write(Car1.showColor()+"<br/>");//输出:red  

14. document.write(Car2.showColor());//输出:blue  

三构造函数方式
创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例,这个名字的首字母大写,以使它与首字母通常是小写的变量名分开。除了这点不同,构造函数看起来很像工厂方式的函数。请看下面的例子:

[javascript]

1. function Car(Color,Doors,Mpg) {  

2.   this.color = Color;  

3.   this.doors = Doors;  

4.   this.mpg = Mpg;  

5.   this.showColor = function() {  

6.        return this.color;  

7.   };  

8. };  

9. var Car1 = new Car("red",4,23);  

10. var Car2 = new Car("blue",3,25);  

11. document.write(Car1.showColor()+"<br/>");//输出:red  

12. document.write(Car2.showColor());//输出:blue  

首先在构造函数内没有创建对象,而是使用this关键字。使用new运算符构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。现在,用new运算符和对象名Car创建对象,就更像 ECMAScript 中一般对象的创建方式了。
就像工厂方式的函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。不过,与工厂方式的函数相似,也可以用外部函数重写构造函数,同样地,这么做语义上无任何意义。

函数的继承
构造函数的属性继承:借用构造函数

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

function Student (name, age) {
  // 借用构造函数继承属性成员
  Person.call(this, name, age)
}

var s1 = Student('张三', 18)
console.log(s1.type, s1.name, s1.age) // => human 张三 18

构造函数的原型方法继承:拷贝继承(for-in)

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}

function Student (name, age) {
  Person.call(this, name, age)
}

// 原型对象拷贝继承原型对象成员
for(var key in Person.prototype) {
  Student.prototype[key] = Person.prototype[key]
}

var s1 = Student('张三', 18)

s1.sayName() // => hello 张三

另一种继承方式:原型继承

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}

function Student (name, age) {
  Person.call(this, name, age)
}

// 利用原型的特性实现继承
Student.prototype = new Person()

var s1 = Student('张三', 18)

console.log(s1.type) // => human

s1.sayName() // => hello 张三
上一篇 下一篇

猜你喜欢

热点阅读