前端一些面试问题

1.javascript对象的几种创建方式

1．工厂方式

//定义
function createCar() {
    var oCar = new Object();
    oCar.color = "red";
    oCar.doors = 4;
    oCar.showColor = function() {
        alert(this.color);
    }
    return oCar;
}
//调用
var ocar1 = createCar();
var ocar2 = createCar();
ocar1.color = "black";
ocar1.showColor();
ocar2.showColor();

修改createCar()函数，给它传递各个属性的默认值：

function createCar(sColor, iDoors, iMpg) {
    var oTempCar = new Object;
    oTempCar.color = sColor;
    oTempCar.doors = iDoors;
    oTempCar.mpg = iMpg;
    oTempCar.showColor = function () {
        alert(this.color);
    };
    return oTempCar;
}

var oCar1 = createCar("red", 4, 23);
var oCar2 = createCar("blue", 3, 25);
oCar1.showColor();  //outputs "red"
oCar2.showColor();  //outputs "blue"

在工厂函数外定义对象的方法，然后通过属性指向该方法，从而避免每次调用函数createCar()，都要创建新函数showColor()。

function showColor(){
    alert(this.color);
}

function createCar(sColor, iDoors, iMpg){
    var oTempCar = new Object;
    oTempCar.color = sColor;
    oTempCar.doors = iDoors;
    oTempCar.mpg = iMpg;
    oTempCar.showColor = showColor;
    return oTempCar;
}

 2.构造函数方式

在构造函数内部无创建对象，而是使用this关键字。使用new运算符调用构造函数时，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值（不必明确使用return运算符）。 

 

function Car(sColor, iDoors, iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.showColor = function() {
        alert(this.color);
    };
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);

 

 

3.原型方式

 

//定义
function Car() {
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.drivers = new Array("Tom", "Jerry");
Car.prototype.showColor = function() {
    alert(this.color);
}
//调用：
var car1 = new Car();
var car2 = new Car();
car1.showColor();
car2.showColor();
alert(car1.drivers);
car1.drivers.push("stephen");
alert(car1.drivers); //结果：Tom,Jerry,stephen
alert(car2.drivers); //结果：Tom,Jerry,stephen

//可以用json方式简化prototype的定义:
Car.prototype = {
    color: "red",
    doors: 4,
    drivers: ["Tom", "Jerry",'safdad'],
    showColor: function() {
         alert(this.color);
    }
}

4.混合的构造函数/原型方式

用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性(方法)。

//定义
  function Car(color,doors) {
        this.color=color;
        this.doors=doors;
        this.drivers=new Array("Tom","Jerry");
   }

   Car.prototype.showColor=function(){
        alert(this.color);
   }
   
   //调用：
  var car1=new Car('red',4);
   var car2=new Car('blue',4);
   
   car1.showColor();
   car2.showColor();
   
   alert(car1.drivers);
   car1.drivers.push("stephen");
   alert(car1.drivers); //结果：Tom,Jerry,stephen
   alert(car2.drivers); //结果：Tom,Jerry
   alert(car1 instanceof Car);

5.动态原型方法

function Car() {
    this.color = "red";
    this.doors = 4;
    this.drivers = new Array("Tom", "Jerry");
    if (typeof Car._initialized == "undefined") {
        Car.prototype.showColor = function() {
            alert(this.color);
        }
        //............
    }
    //最后定义
    Car._initialized = true;
}

6.混合工厂方式

目的是创建假构造函数，只返回另一种对象的新实例。

function Car() {
    var oTempCar = new Object();
    oTempCar.color="red";
    oTempCar.doors=4;
    oTempCar.mpg=23;
    oTempCar.showColor = function() {
        alert(this.color);
    }
    return oTempCar;
}

//与经典方式不同，这种方式使用new运算符，使它看起来像真正的构造函数：
var oCar = new Car();

由于在Car()构造函数内部调用了new运算符，所以将忽略第二个new运算符（位于构造函数之外）。在构造函数内部创建的对象被传递回变量var。这种方式在对象方法的内部管理方面与经典方式有着相同的问题。强烈建议：除非万不得已，还是避免使用这种方式。
总结：（采用哪种方式)
目前使用最广泛的是混合的构造函数/原型方式。此外，动态原型方法也很流行，在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式，因为这样会给代码引入问题。