Javascript学习笔记之函数篇(五) : 构造函数

Javascript 中的构造函数与其他语言相比也是不同的。任何通过关键字 new 调用的函数都可以当做构造函数。
在构造函数体内,this 指向新创建的对象。如果构造函数体内没有显示的 return 表达式,那么我们就默认返回 this,也就是新建的对象。

代码如下:

function Foo() {
    this.bla = 1;
}
Foo.prototype.test = function() {
    console.log(this.bla);
};
var test = new Foo();

上面的代码将 Foo 作为构造函数进行调用,并将新建对象的原型(__proto__)指向了 Foo.prototype。
如果我们在构造函数内定义返回的 return 表达式,构造函数就会返回整个表达式,但这个返回表达式必须为一个对象。

代码如下:

function Bar() {
    return 2;
}
new Bar(); // a new object
function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
new Test(); // the returned object

如果 new 被省略,那么函数将不能返回一个新的对象。

代码如下:

function Foo() {
    this.bla = 1; // gets set on the global object
}
Foo(); // undefined

上面的例子可能在某些场景下也可以运行,但由于 Javascript 中 this 的工作机制,这里 this 将指向全局对象。

工厂模式

为了能够不使用关键字 new,构造函数将不得不显示返回一个值。

代码如下:

function Bar() {
    var value = 1;
    return {
        method: function() {
            return value;
        }
    }
}
Bar.prototype = {
    foo: function() {}
};
new Bar();
Bar();

上例中使不使用 new 来调用函数 Bar 达到的效果是一样的,将会返回一个新建的包含 method 方法的对象,这里实际上就是一个闭包。
这里需要注意一点,new Bar() 将不会返回 Bar.prototype,而是在 return 表达式内函数 method 的原型对象。
上例中,使用 new 与否在功能上是无差异的。

通过工厂模式创建新的对象

我们经常被提醒不要使用 new,因为一旦忘记了它的使用将导致错误。
为了创建一个对象,我们更愿意使用工厂模式并在工厂模式内构造一个新的对象。

代码如下:

function Foo() {
    var obj = {};
    obj.value = 'blub';

var private = 2;
    obj.someMethod = function(value) {
        this.value = value;
    }

obj.getPrivate = function() {
        return private;
    }
    return obj;
}

尽管上例代码比使用 new 时更不容易出错,而且在使用私有变量时将更加方便,但同时也有一些不好的地方:

因为不能共享原型对象,所以需要更多的内存。
为了实现继承,工厂模式需要拷贝另一个对象的所有方法或者将其作为新对象的原型。
放弃原型链只是为了避免使用 new,这似乎与 Javascript 语言的精神相悖。

总结

尽管使用 new 可能比较容易产生错误,但这并不能成为放弃使用原型链的原因。至于最后采取哪种方式,这需要根据应用的需求而定。最好的方式就是选择一种风格并坚持下去。

简单的说构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象。

(0)

相关推荐

  • Javascript 使用function定义构造函数

    Javascript中创建对象的语法是在new运算符的后面跟着一个函数的调用.如 复制代码 代码如下: var obj = new Object(); var date = new Date(); 运算符new首先创建一个新的没有任何属性的对象,然后调用该函数,把新的对象作为this关键字的值传递. 复制代码 代码如下: var date = new Date()的伪代码的实现就是 var obj = {}; var date = Date.call(obj); 构造函数的作用就是初始化一个新创

  • Javascript的构造函数和constructor属性

    例如,在Chrome下调试如下程序,很清楚的展示了这点: 然而事情并不是这么简单.再看下面的代码: 很显然,这个时候obj的constructor已经不再是创建它的函数,注意到obj.name也是undefined,因此修改构造函数的prototype的contructor并不会影响构造函数所产生的对象.真正的原因是:一个对象的constructor是它的构造函数的prototype.constructor,而每一个函数都有一个prototype,默认情况下,这个prototype有一个cons

  • Javascript面向对象编程(二) 构造函数的继承

    今天要介绍的是,如何生成一个"继承"多个对象的实例. 比如,现在有一个"动物"对象的构造函数, 复制代码 代码如下: function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数, 复制代码 代码如下: function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫"继承&

  • JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即"子类型.prototype = new 父类型();&qu

  • Javascript 构造函数详解

    一.什么是构造函数 在一些面向对象的语言,如Java.C++.PHP中,构造函数是很常见的.在Javascript中构造函数首先是一个普通的函数,它可以使用new 操作符来调用,并生成一个特殊类型的对象. 复制代码 代码如下: // "Benjamin" is a constructor var benjamin = new Benjamin("zuojj", "male"); 在上面这个实例中benjamin是一个Benjamin对象,那么它是

  • Javascript学习笔记之数组的构造函数

    数组的构造函数 由于数组的构造函数在处理参数时的不确定性,因此强烈建议使用 [] 符号来创建一个新数组. [1, 2, 3]; // Result: [1, 2, 3]new Array(1, 2, 3); // Result: [1, 2, 3][3]; // Result: [3]new Array(3); // Result: []new Array('3') // Result: ['3'] 当只有一个参数被传递到数组的构造函数中,并且这个参数还是一个数字时,构造函数将会返回一个元素值为

  • Javascript学习笔记之函数篇(五) : 构造函数

    Javascript 中的构造函数与其他语言相比也是不同的.任何通过关键字 new 调用的函数都可以当做构造函数. 在构造函数体内,this 指向新创建的对象.如果构造函数体内没有显示的 return 表达式,那么我们就默认返回 this,也就是新建的对象. 复制代码 代码如下: function Foo() {     this.bla = 1; } Foo.prototype.test = function() {     console.log(this.bla); }; var test

  • Javascript学习笔记之 函数篇(二) : this 的工作机制

    全局作用域下 this; 当在全局作用域中使用 this,它指向全局对象. 这里详细介绍下全局对象: 全局对象(Global object) 是在进入任何执行上下文之前就已经创建了的对象: 这个对象只存在一份,它的属性在程序中任何地方都可以访问,全局对象的生命周期终止于程序退出那一刻. 全局对象初始创建阶段将 Math.String.Date.parseInt 作为自身属性,等属性初始化,同样也可以有额外创建的其它对象作为属性(其可以指向到全局对象自身).例如,在 DOM 中,全局对象的 win

  • Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式

    函数声明 function foo() {} 函数 foo 将会在整个程序执行前被 hoist (提升),因此它在定义 foo 函数的整个 scope (作用域)中都是可用的.即使在函数定义之前调用它也没问题. foo(); // Works because foo was created before this code runs function foo() {} 因为我打算专门写篇介绍作用域的文章,所以这里就不详述了. 函数表达式 对于函数声明,函数的名称是必须的,而对于函数表达式而言则是

  • Javascript学习笔记之 函数篇(三) : 闭包和引用

    Javascript 中一个最重要的特性就是闭包的使用.因为闭包的使用,当前作用域总可以访问外部的作用域.因为 Javascript 没有块级作用域,只有函数作用域,所以闭包的使用与函数是紧密相关的. 模拟私有变量 复制代码 代码如下: function Counter(start) {     var count = start;     return {         increment: function() {             count++;         },      

  • Javascript学习笔记之函数篇(四):arguments 对象

    每一个 Javascript 函数都能在自己作用域内访问一个特殊的变量 - arguments.这个变量含有一个传递给函数的所有参数的列表. arguments 对象不是一个数组.尽管在语法上它跟数组有相同的地方,例如它拥有 length 属性.但它并不是从 Array.prototype 继承而来,实际上,它就是一个对象. 因此,我们不能直接对 arguments 使用一些数组的方法,例如 push, pop 或 slice 等. 所以为了使用这些方法,我们就需要将其转换为一个真正的数组. 转

  • Javascript学习笔记之函数篇(六) : 作用域与命名空间

    在之前的介绍中,我们已经知道 Javascript 没有块级作用,只有函数级作用域. 复制代码 代码如下: function test() { // a scope     for(var i = 0; i < 10; i++) { // not a scope         // count     }     console.log(i); // 10 } Javascript 中也没有显示的命名空间,这就意味着一切都定义在全局作用域中.每一次引用一个变量时,Javascript 会往上遍

  • Javascript学习笔记之 对象篇(四) : for in 循环

    先上范例: // Poisoning Object.prototype Object.prototype.bar = 1; var foo = {moo: 2}; for(var i in foo) { console.log(i); // prints both bar and moo } 这里我们要注意两点,一是 for in 循环会忽略 enumerable 设置为 false 的属性.例如一个数组的 length 属性.第二是,由于 for in 会遍历整个原型链,所以当原型链过长时,会

  • javascript学习笔记之函数定义

    函数声明式 function funname( 参数 ){ ...执行的代码 } 声明式的函数并不会马上执行,需要我们调用才会执行:funname(); * 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句,所以不以分号结束. 函数表达式 var x = function( 参数 ){ ...执行的代码块 }; 函数表达式定义的函数,实际上也是一个匿名函数(这个函数没有名字,直接存储在变量中) * 函数表达式结尾是要加分号的,因为它是一个执行语句. Function

  • Javascript 学习笔记之 对象篇(二) : 原型对象

    Javascript 是唯一一个被广泛运用的原型式继承的语言,所以理解两种继承方式的差异是需要时间的. 第一个主要差异就是 Javascript 使用原型链来继承: function Foo() { this.value = 42; } Foo.prototype = { method: function() {} }; function Bar() {} 设置 Bar 的 prototype 为 Foo 的对象实例: Bar.prototype = new Foo(); Bar.prototy

  • JavaScript学习笔记之函数记忆

    本文讲解函数记忆与菲波那切数列的实现,分享给大家,具体如下 定义 函数记忆是指将上次的计算结果缓存起来,当下次调用时,如果遇到相同的参数,就直接返回缓存中的数据. 举个例子: function add(a, b) { return a + b; } // 假设 memorize 可以实现函数记忆 var memoizedAdd = memorize(add); memoizedAdd(1, 2) // 3 memoizedAdd(1, 2) // 相同的参数,第二次调用时,从缓存中取出数据,而非

随机推荐