函数，方法，构造函数调用

1、函数调用

Function绝对是JavaScript中的重中之重。在JavaScript中，Function承担了procedures, methods, constructors甚至是classes以及modules的功能。

在面向对象程序设计中，functions，methods以及class constructor往往是三件不同的事情，由不同的语法来实现。但是在JavaScript中，这三个概念都由function来实现，通过三种不同的模式。

最简单的使用模式就是function 调用：

function hello(username) {
    return "hello, " + username;
}
hello("Keyser S?ze"); // "hello, Keyser S?ze"
  • 1
  • 2
  • 3
  • 4

2、方法的调用

而methods这一概念在JavaScript中的表现就是，一个对象的属性是一个function：同样的是函数，将其赋值给一个对象的成员以后，就不一样了。将函数赋值给对象的成员后，那么这个就不在称为函数，而应该叫做方法。

var obj = {
    hello: function() {
        return "hello, " + this.username;
    },
    username: "Hans Gruber"
};
obj.hello(); // "hello, Hans Gruber"
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

真正的行为是，调用本身才会决定this会绑定到哪个对象，即：

obj1.hello()会将this绑定到obj1，obj2.hello()则会将this绑定到obj2。记住一句话，谁调用，this就指向谁

正因为this绑定的这种规则，在下面的用法也是可行的：

function hello() {
    return "hello, " + this.username;
}  

var obj1 = {
    hello: hello,
    username: "Gordon Gekko"
};
obj1.hello(); // "hello, Gordon Gekko"  

var obj2 = {
    hello: hello,
    username: "Biff Tannen"
};_
obj2.hello(); // "hello, Biff Tannen"
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

但是，在一个普通的函数中，如上面的hello函数，使用this关键字是不太好的方式，当它被直接调用的时候，this的指向就成了问题。在这种情况下，this往往被指向全局对象(GlobalObject)，在浏览器上一般就是window对象。

而这种行为是不确定和没有意义的。

所以在ES5标准中，如果使用了strict mode，那么this会被设置为undefined：

function hello() {
    "use strict";
    return "hello, " + this.username;
}
hello(); // error: cannot read property "username" of undefined
  • 1
  • 2
  • 3
  • 4
  • 5

以上这种做法是为了让潜在的错误更快的暴露出来，避免了误操作和难以找到的bug。

区别普通函数调用和方法调用，直接看这个例子就明确了。

var func = function() {
    alert(this);
};
var o = {};
o.fn = func;
// 比较
alert(o.fn === func);//true
// 调用
func();//[object Window]
o.fn();//[object Object]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这里的运行结果是，两个函数是相同的，因此打印结果是 true。但是由于两个函数的调用是不一样的，func 的调用，打印的是 [object Window]，而 o.fn 的打印结果是 [object Object]。

这里便是函数调用与方法调用的区别，函数调用中，this 专指全局对象 window，而在方法中 this 专指当前对象，即 o.fn 中的 this 指的就是对象o。

3、构造函数的调用

function的第三种使用模式就是讲它作为constructor：

构造器中的this

我们需要分析创建对象的过程，方能知道this的意义. 如下面代码:

  var Person = function() {
    this.name = "小平果";
  };
  var p = new Person();
  • 1
  • 2
  • 3
  • 4

这里首先定义了函数Person，下面分析一下整个执行：

  1. 程序在执行到这一句的时候，不会执行函数体，因此 JavaScript的解释器并不知道这个函数的内容.
  2. 接下来执行new关键字，创建对象，解释器开辟内存，得到对象的引用，将新对象的引用交给函数.
  3. 紧接着执行函数，将传过来的对象引用交给this. 也就是说，在构造方法中，this就是刚刚被new创建出来的对象.
  4. 然后为this 添加成员，也就是为对象添加成员.
  5. 最后函数结束，返回this，将this交给左边的变量.

分析过构造函数的执行以后，可以得到，构造函数中的this就是当前对象.

构造器中的 return

在构造函数中return的意义发生了变化，首先如果在构造函数中，如果返回的是一个对象，那么就保留原意. 如果返回的是非对象，比如数字、布尔和字符串，那么就返回this，如果没有return语句，那么也返回this. 看下面代码：

 // 返回一个对象的 return
 var ctr = function() {
   this.name = "赵晓虎";
   return {
    name:"牛亮亮"
   };
 };
 // 创建对象
 var p = new ctr();
 // 访问name属性
 alert(p.name);

 //执行代码，这里打印的结果是"牛亮亮". 因为构造方法中返回的是一个对象，那么保留return的意义，返回内容为return后面的对象. 再看下面代码：

  // 定义返回非对象数据的构造器
  var ctr = function() {
    this.name = "赵晓虎";
    return "牛亮亮";
  };
  // 创建对象
  var p = new ctr();
  // 使用
  alert(p);
  alert(p.name);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

代码运行结果是，先弹窗打印[object Object]，然后打印”赵晓虎”. 因为这里 return 的是一个字符串，属于基本类型，那么这里的return语句无效，返回的是this对象. 因此第一个打印的是[object Object]而第二个不会打印undefined.

function User(name, passwordHash) {
    this.name = name;
    this.passwordHash = passwordHash;
}
var u = new User("sfalken",
    "0ef33ae791068ec64b502d6cb0191387");
u.name; // "sfalken"
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

使用new关键将function作为constructor进行调用。和function以及method调用不一样的是，constructor会传入一个新的对象并将它绑定到this，然后返回该对象作为constructor的返回值。而constructor function本身的作用就是为了初始化该对象。

构造函数调用常犯的一个错误

兴致勃勃地定义了下面这么个构造函数：

var Coder = function( nick ){
this.nick = nick;
};
  • 1
  • 2
  • 3

定义构造函数结束后呢？没错，赶紧实例化：

var coder = Coder( ‘casper‘ );
  • 1

这个coder兄弟叫什么名字？赶紧打印下：

console.log( coder.nick ); //undefined
= =b 竟然是undefined！！再回过头看看实例化的那个语句，不难发现问题出在哪里：少了个new
var coder = Coder( ‘casper‘ ); //当作普通的函数来调用，故内部的this指针其实指向window对象
console.log( window.nick); //输出：casper
var coder = new Coder( ‘casper‘ ); //加上new，一切皆不同，this正确地指向了当前创建的实例
console.log( coder.nick ); //输出：casper
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

这样的错误貌似挺低级的，但出现的概率挺高的，肿么去避免或减少这种情况的发生呢？

可以在内部实现里面动下手脚：

var Coder = function( nick ){
    if( !(this instanceof Coder) ){
        return new Coder( nick );
    }
        this.nick = nick;
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

其实很简单，实例化的时候，内部判断下，当前this指向的对象的类型即可，如果非当前构造函数的类型，强制重新调用一遍构造函数。

突然觉得Coder这名字不够洋气？想用Hacker，好吧，我改。。。数了下，一共有三处要改，这不科学，有没有办法只把构造函数的名字改了就行？

当然有：

var Coder = function( nick ){
    if( !(this instanceof arguments.callee) ){
        return new arguments.callee( nick );
    }
    this.nick = nick;
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

tips：据说在ES 5的严格模式下面arguments.callee会被禁用，不过仅当ES 5普及同时你指定了要使用严格模式，否则还是可以用的发散下思维。

转载:http://blog.csdn.net/i10630226/article/details/49204021

时间： 2024-10-19 16:37:41

函数，方法，构造函数调用的相关文章

C#使用this关键字实现串联构造函数调用方法

本文实例讲述了C#使用this关键字实现串联构造函数调用方法.分享给大家供大家参考.具体分析如下: 在一个类中如果需要实现多个自定义构造函数,通常做法是在构造函数中实现各自的业务逻辑,如果这些业务逻辑的实现并非截然不同的话,显然不符合oop编程思想,极不利于维护,当然,我们也可以通过将相同的逻辑部分封装成一个方法,但还有一种更为合理简单的方法,下面就通过this关键字来实现串联构造函数做一简单示例. 示例代码如下: 代码如下: public class Person { public strin

Javascript读书笔记：函数定义和函数调用

定义函数 使用function关键字来定义函数,分为两种形式: 声明式函数定义: function add(m,n) { alert(m+n); } 这种方式等同于构造一个Function类的实例的方式: var add = new Function("m", "n", "alert(m+n);"); Function类构造方法的最后一个参数为函数体:"alert(m+n);",前面的都是函数的形参,参数必须是字符串形式的:&

【前端学习笔记】函数定义、函数调用、this

函数定义的三种方式与特点: 1.函数声明:(特点:会被前置:重复定义函数时,最后一次定义有效.) 2.函数表达式: 3.函数实例化:(特点:只能访问本地作用域与全局作用域!!!) /* 对象实例化定义函数的特点 */ var person = {name:"刘德华", age:50}; (function(){ var person = {name:"刘德华", age:30}; (function() { var person = {name:"刘德华&

Go语言之函数方法

在Go语言中,函数和方法不太一样,有明确的概念区分.在其他语言中,比如Java,一般来说,函数就是方法,方法就是函数.但是在Go语言中,函数是指不属于任何结构体.类型的方法.也就是说,函数是没有接收者的:而方法是有接收者的.我们说的方法要么是属于一个结构体的,要么属于一个新定义的类型的. 函数 函数和方法,虽然概念不同,但是定义非常相似.函数的定义声明没有接收者,所以我们直接在Go文件里.Go包之下定义声明即可. func main() {     sum := add(1, 2)     fm

【C/C++学院】0822-类型转换函数与构造转换函数/类的继承/类的继承以及区别/继承静态成员与静态函数//继承实现代码重用/单继承QT案例/多继承简介以及实战/Gpu编程

类型转换函数与构造转换函数 #include<iostream> class fushu { public: explicit fushu(int num)//避免隐式转换,引发歧义 { x = num; y = num; } void print() { std::cout << x << "+" << y << "i" << std::endl; } operator int(); //不支

C++中类的构造函数调用顺序

当建立一个对象时,首先调用基类的构造函数,然后调用下一个派生类的构造函数,依次类推,直至到达派生类次数最多的派生次数最多的类的构造函数为止.简而言之,对象是由"底层向上"开始构造的.因为,构造函数一开始构造时,总是要调用它的基类的构造函数,然后才开始执行其构造函数体,调用直接基类构造函数时,如果无专门说明,就调用直接基类的默认构造函数.在对象析构时,其顺序正好相反. 下面的这个程序说明这个问题 总结下来,我们必须明确的是当一个类继承与基类,并且自身还包含有其他类的成员对象的时候,构造函

C#中system.object的函数方法功能介绍-转载

C#中system.object的函数方法功能介绍 在C#中,Object类型是所有类型的根,大家平常开发中都要跟它打交道,但不见得对它里面的每个方法都知根知底,下面对它里面的每个方法都进行仔细的总结. 概述: 构造函数 Equals函数 Finalize函数 GetHashCode函数 GetType()函数 ReferenceEquals函数 MemberWiseClone()函数 ToString()函数 Object类型中一共有8个方法,重载的方法没有算进来.下面一一来看看这些方法. 1

[development][c++] C++构造函数调用构造函数

构造函数调用构造函数是会问题的. 外层函数返回的内存, 与被调用的构造函数返回的内存并不是一个内存. 错误示例代码如下: msg_log(const char *name, const char* thread_name, const char *cfg_file, int type = STREAM, int level = MSG_ERROR) : _name(name), _thread_name(thread_name), _level(level), _type(type), logf

构造函数调用规则

首先我们知道只要创建一个类编译器会提供三个默认函数 1.默认构造函数 (无参,空实现) 2.默认析构函数(无参,空实现) 3.默认拷贝构造函数,对值属性进行拷贝 调用规则如下 1.如果我们定义有参构造函数,编译器不会提供默认构造函数,但提供默认拷贝构造函数 2.如果用户定义了拷贝构造函数,编译器将不会提供其他构造函数 1 #include<bits/stdc++.h> 2 using namespace std; 3 4 class person 5 { 6 public: 7 person(