JavaScript构造函数

2018-01-06 19:14 更新

Javascript面向对象设计 - JavaScript构造函数

原型的共享性质使它们成为定义方法的理想选择一次给定类型的所有对象。

它将方法放在原型上更有效率然后使用它来访问当前实例。

例子

例如，考虑下面的新的Book构造函数:


function Book(name) { //  ww w .j a v a2  s. com
    this.name = name; 
} 

Book.prototype.writeLine = function() { 
    console.log(this.name); 
};

var book1 = new Book("Javascript"); 
var book2 = new Book("CSS"); 

console.log(book1.name);          // "Javascript" 
console.log(book2.name);          // "CSS" 

book1.writeLine();                  // outputs "Javascript" 
book2.writeLine();                  // outputs "CSS"

上面的代码生成以下结果。

注意

上面的代码生成以下结果。...


function Book(name) { // w  ww .j a  v a  2  s .  c  om
    this.name = name; 
} 

Book.prototype.writeLine = function() { 
    console.log(this.name); 
}; 
Book.prototype.favorites = []; 

var book1 = new Book("Javascript"); 
var book2 = new Book("CSS"); 

book1.favorites.push("A"); 
book2.favorites.push("B"); 

console.log(book1.favorites);     // "A,B" 
console.log(book2.favorites);     // "A,B"

上面的代码生成以下结果。

笔记2

以下代码显示了如何向原型添加更多方法:


function Book(name) { /*  w  ww .ja  va 2  s .  c o m*/
    this.name = name; 
} 

Book.prototype = { 
   writeLine : function() { 
        console.log(this.name); 
    }, 

   toString : function() { 
        return "[Book " + this.name + "]"; 
    } 
};

上面的代码在原型上定义了两个方法writeLine()和 toString()。

有一个副作用需要注意:


function Book(name) { //w ww.java 2s . c  o m
    this.name = name; 
} 

Book.prototype = { 
   writeLine : function() { 
        console.log(this.name); 
    }, 

   toString : function() { 
        return "[Book " + this.name + "]"; 
    } 
}; 

var book1 = new Book("Javascript"); 

console.log(book1 instanceof Book);         // true 
console.log(book1.constructor === Book);    // false 
console.log(book1.constructor === Object);    // true

上面的代码生成以下结果。

为了避免这种情况，在覆盖原型时将构造函数属性恢复为正确的值:


function Book(name) { //from w  ww. j a  va  2s .com
    this.name = name; 
} 

Book.prototype = { 
    constructor : Book, 

    writeLine : function() { 
        console.log(this.name); 
    }, 

    toString : function() { 
        return "[Book " + this.name + "]"; 
    } 
}; 

var book1 = new Book("Javascript"); 
var book2 = new Book("CSS"); 

console.log(book1 instanceof Book);         // true 
console.log(book1.constructor === Book);    // true 
console.log(book1.constructor === Object);    // false 

console.log(book2 instanceof Book);         // true 
console.log(book2.constructor === Book);    // true 
console.log(book2.constructor === Object);    // false

上面的代码生成以下结果。

改变原型

由于特定类型的所有实例引用共享原型，我们可以扩充所有这些对象。

[[Prototype]]属性包含一个指向原型的指针，任何对原型的更改在引用它的任何实例上都可用。

我们可以随时向原型添加新成员，并将这些更改反映在现有实例上。


function Book(name) { /*from  w ww. ja  v a  2 s.  co m*/
   this.name = name; 
} 

Book.prototype = { 
   constructor : Book, 

   writeLine : function() { 
       console.log(this.name); 
   }, 

   toString : function() { 
       return "[Book " + this.name + "]"; 
   } 
}; 
var book1 = new Book("Javascript"); 
var book2 = new Book("CSS"); 

console.log("sayHi" in book1);        // false 
console.log("sayHi" in book2);        // false 

// add a new method 
Book.prototype.sayHi = function() { 
    console.log("Hi"); 
}; 

book1.sayHi();                        // outputs "Hi" 
book2.sayHi();                        // outputs "Hi"

上面的代码生成以下结果。

内置对象原型

上面的代码生成以下结果。...

以下代码显示了如何通过修改Array.prototype为数组添加一个新方法。


Array.prototype.sum = function() { /* ww w.  j a  v a2  s  .  co  m*/
    return this.reduce(function(previous, current) { 
        return previous + current; 
    }); 
}; 

var numbers = [ 1, 2, 3, 4, 5, 6 ]; 
var result = numbers.sum(); 

console.log(result);

上面的代码生成以下结果。

以下代码显示了如何为字符串值添加新方法。


String.prototype.capitalize = function() { 
    return this.charAt(0).toUpperCase() + this.substring(1); 
}; 

var message = "hello world!"; 
console.log(message.capitalize());

上面的代码生成以下结果。