NO END FOR LEARNING

Writing blog if you feel tired | 学海无涯 苦写博客

JavaScript渐入佳境 - This指针

| Comments

在JavaScript中,随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用该函数的那个对象。this关键字在Javascript中和执行环境,而非声明环境有关。

举个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
var someone = {
    name: "Bob",
    showName: function(){
        alert(this.name);
    }
};

var other = {
    name: "Tom",
    showName: someone.showName
}

other.showName();  //Tom

这里其实应该好理解,other的showName属性指向了someone的showName所声明的函数,他等价于:

1
2
3
4
5
6
7
8
var other = {
    name: "Tom",
    showName: function(){
        alert(this.name);
    }
}

other.showName();  //Tom

所以this指针理所当然的指向other自己。

1
2
3
4
5
6
7
8
9
10
11
var name = "Tom";

var Bob = {
    name: "Bob",
    show: function(){
        alert(this.name);
    }
}

var show = Bob.show;
show();  //Tom

上面这个show为什么显示Tom,它的执行对象是什么?Window对象。

Window对象是所有客户端JavaScript特性和API的主要接入点。它表示Web浏览器的一个窗口,并且可以用标示符window(小写)来引用。

1
2
3
4
window
$ Window {external: Object, chrome: Object, document: document, \_ASYNC_START: 1451649155228, \_chrome_37_fix: undefined}
Window
$ function Window() { [native code] }

Window对象定义了一些属性,比如,指代Location对象(location)的location属性。

1
2
window.location === location
$ true

Window对象还定义了一些方法,比如alert()和setTimeout(),使用时,我们都没有显示的使用window属性。Window对象是全局对象,处于作用域链的顶部,它的属性和方法实际上全是全局变量和全局函数。 通过window变量可以引用到Window对象本身,但是如果要使用全局窗口对象的属性,并不需要使用window。

我们常说,JavaScript很容易就创建一个全局变量或者全局函数。比如,直接var a_global_variable = ‘a global variable’。它不仅使全局变量,它还是window的一个属性。如下:

1
2
3
4
5
6
7
var a_global_variable = 'a global variable'
a_global_variable
$ "a global variable"
window.goodtest
$ "a global variable"
window.a_global_variable === a_global_variable
$ true

为什么在Window下?head/全局对象/顶层对象

JavaScript代码本身必须包含在对象内部。在Web浏览器环境中编写JavaScript代码时,JavaScript被包含在Window对象内,并在其内部执行。这个Window对象被认为是“head对象”。JavaScript的所有实现都需要使用一种head对象。

head对象是由JavaScript在幕后创建,用于封装用户用自定义代码,并容纳JavaScript预定义的原生代码。JavaScript将用户自定义代码放入head对象中来执行。在编写JavaScript代码时,它将被编写在head对象的上下文中。

换一种解释:

JavaScript的所有对象都存在于一个运行环境之中,这个运行环境本身也是对象,称为“顶层对象”。这就是说,JavaScript的所有对象,都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”,在浏览器环境中,这个顶层对象就是Window对象。

所有浏览器环境的全局变量,都是Window对象的属性。可以把Window理解成JavaScript Context 上下文环境。

理解了setTimeout是Window的属性之后,理解下面这段代码应该比较容易了:

1
2
3
4
5
6
7
8
9
10
11
var name = "Bob";
var nameObj ={
    name : "Tom",
    showName : function(){
        alert(this.name);//此时this指向的是window  
    },
    waitShowName : function(){
        setTimeout(this.showName, 1000);//这里的this指向的是nameObj.showName
    }
};
nameObj.waitShowName();// Bob

和下面这段代码相似

1
2
3
4
var name = "Bob";
setTimeout(function(){
    alert(this.name);
}, 1000);

new关键字

new关键字指向创建的对象,在上一篇文章中已经介绍的很清楚了。 http://benweizhu.github.io/blog/2015/12/31/javascript-contructor-new-prototype/

1
2
3
4
5
6
7
8
function Person(name){
    this.name = name; //这个this指向用该构造函数构造的新对象,这个例子是Bob对象
}
Person.prototype.show = function(){
    alert(this.name);
}
var Bob = new Person("Bob");
Bob.show();        //Bob

apply和call改变this指向的对象

apply和call能够强制改变函数执行时的当前对象,让this指向其他对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var name = "window";

var someone = {
    name: "Bob",
    showName: function(){
        alert(this.name);
    }
};

var other = {
    name: "Tom"
};

someone.showName();   //Bob
someone.showName.apply();    //window
someone.showName.apply(other);    //Tom

参考资料:
1.http://www.cnblogs.com/justany/archive/2012/11/01/the_keyword_this_in_javascript.html
2.JavaScript启示录
3.http://blog.csdn.net/zoutongyuan/article/details/29355021

JavaScript渐入佳境 - 构造函数、new、原型

| Comments

在JavaScript中,对象是一系列的键值对,ECMA-262把对象(object)定义为“属性的无序集合,每个属性存放一个原始值、对象或函数”。

JavaScript是面向对象的语言(而且比C++/Java更加的面向对象),因为所有东西都是对象,包括函数,但是在JavaScript没有类的概念。既然没有类,根据对之前对C++/Java这样的基于类的面向对象语言的理解,应该如何理解JavaScript中构造函数的概念,因为在基于类的面向对象中,构造函数只存在于类当中。

JavaScript构造函数、JavaScript中的constructor属性

在JavaScript中,每个具有原型的对象都会自动获得constructor属性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊对象之外,其他所有的JavaScript内置对象都具备constructor属性。例如:Array、Boolean、Date、Function、Number、Object、String等。所有主流浏览器均支持该属性。

现在,请暂且不要去思考“具有原型的对象”中原型的意思。

对象的constructor属性返回创建该对象的函数的引用,无论直译或者按照基于类的面向对象语言的理解,我们且把该函数称为“构造函数”。下面是一些例子:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 字符串:String()
var str = "张三";
document.writeln(str.constructor); // function String() { [native code] }
document.writeln(str.constructor === String); // true

// 数组:Array()
var arr = [1, 2, 3];
document.writeln(arr.constructor); // function Array() { [native code] }
document.writeln(arr.constructor === Array); // true

// 数字:Number()
var num = 5;
document.writeln(num.constructor); // function Number() { [native code] }
document.writeln(num.constructor === Number); // true

// 自定义对象:Person()
function Person(){
    this.name = "CodePlayer";
}
var p = new Person();
document.writeln(p.constructor); // function Person(){ this.name = "CodePlayer"; }
document.writeln(p.constructor === Person); // true

// 字面量对象:Object()
var o = { "name" : "张三"};
document.writeln(o.constructor); // function Object() { [native code] }
document.writeln(o.constructor === Object); // true

// 自定义函数:Function()
function foo(){
    alert("CodePlayer");
}
document.writeln(foo.constructor); // function Function() { [native code] }
document.writeln(foo.constructor === Function); // true

// 函数的原型:bar()
function bar(){
    alert("CodePlayer");
}
document.writeln(bar.prototype.constructor); // function bar(){ alert("CodePlayer"); }
document.writeln(bar.prototype.constructor === bar); // true

代码中的[native code],表示这是JavaScript的底层内部代码实现,无法显示代码细节。

你会发现连那些看似是基本类型的数字“5”和字符串“张三”(当然Java里面有String类型)都具有constructor属性。特别是定义一个函数foo,foo也有constructor属性,而且指向名字是Function的函数(暂且不管为什么如此)。

通过var str = “张三”;,我创建了一个String对象,通过var num = 5;,我创建了一个Number对象。

在Java或者C++中,通过new关键字调用某个类的构造函数,例如:new SomeConstructor(),来创建对象,知识SomeConstructor和类名一样。

那么在JavaScript,如何自定一个具有类型对象呢?上面的Person例子已经给出了答案。

p对象的constructor是它:function Person(){ this.name = “CodePlayer”; }

那么要创建一个新的p对象,只需要var p = new Person();。表面上的理解和C++或者Java相似。

剩下的疑问是创建这个对象的时候使用了new关键字。它是干什么的?new关键字很容易让你想到C++和Java中通过new来创建新的对象(分配一段内存空间)。

在《JavaScript高级编程》里对new操作符的解释:

new操作符会让构造函数产生如下变化:
1.创建一个新对象
2.将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
3.执行构造函数中的代码(为这个新对象添加属性)
4.返回新对象

MDN上也有介绍new关键字: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new

1
2
3
4
5
6
function Person(){ this.name = "CodePlayer"; console.log(this) }
var p = Person()
$ Window {external: Object, chrome: Object, document: document, WPCOMSharing: Object, RecaptchaTemplates: Object}

var p = new Person()
$ Person {name: "CodePlayer"}

JavaScirpt中的构造函数和普通函数没有什么区别,你一样的可以像普通函数一样调用它,如上例,那么this指向函数执行时的当前对象(关于this指针会在之后的文章中详解)。

但如果通过new关键字来调用函数,该函数就成为了构造函数,this指针就会指向新创建的对象。这就是JavaScript的构造函数。

通过new和构造函数创建对象的问题

new的方式创建对象看上去非常好用,而且和C++或者Java语言很相似,比较容易理解它在创建一个新的对象。但是构造函数方法创建对象存在一个浪费内存的问题。

以下摘抄自阮一峰的文章: http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

“请看,我们现在为Cat对象添加一个不变的属性”type”(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样:”

1
2
3
4
5
6
7
8
9
10
11
12
13
function Cat(name,color){
  this.name = name;
  this.color = color;
  this.type = "猫科动物";
  this.eat = function(){alert("吃老鼠");};
}

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

alert(cat1.eat == cat2.eat); //false

“表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。”

解决这个问题,阮一峰在他的文章中介绍了Prototype模式。我猜测对JavaScript面向对象感兴趣的同志已经无数次看到这样的代码了。

JavaScript原型、Prototype和__proto__

prototype英文翻译过来“原型”

什么是原型?原型是一个从其他对象继承属性的对象。

是不是任何对象都可以是原型?是的。

哪些对象有原型?每个对象都有一个默认的原型。原型本身就是对象,每一个原型本身也存在一个原型。(只有一个例外,默认的对象原型在每条原型链的顶端,其他的原型在原型链的后面)

当我看到上面的回答时,加上我对prototype英文含义的理解,我会认为每个对象都有一个prototype. 但当我写({}).prototype的时候,或者”“.prototype,我却得到了undefined,是不是疯了?

忘记你所理解的关于prototype属性的理解(它其实只是函数对象的一个属性,比如Object.prototype,Function.prototype,Array.prototype,在浏览器控制台查看Object,Function,Array这些值,它们都是函数) - 这个名字很可能是迷惑的根源。

一个对象真正的prototype是内部[[Prototype]]属性. ECMA5介绍了标准的访问方法,Object.getPrototypeOf(object)。这个最新的实现已被Firefox, Safari, Chrome and IE9所支持。另外,除了IE,所有的浏览器都支持非标准的访问方法__proto__,它指向当对象被实例化的时候,用作原型的对象。

那么我想知道prototype属性到底是干什么的?比如Object.prototype,Function.prototype,Array.prototype等。特别是上面的阮一峰介绍的Prototype模式。

Object.prototype属性表示对象Object的原型对象,它是所有对象原型链的根节点。

那其他的呢?好吧,首先,在前面介绍构造函数时已经知道,JavaScript不区分构造函数和其它普通函数,所以每个函数都有prototype属性。反而任何不是方法的,都没有这样的属性。

1
2
3
4
5
6
7
8
9
10
11
//永远不是构造函数的方法,无论如何都是有prototype属性的
Math.max.prototype; //[object Object]

//构造函数也有prototype属性
var A = function(name) {
    this.name = name;
}
A.prototype; //[object Object]

//Math不是一个方法,所以没有prototype属性
Math.prototype; //null

现在可以定义:
一个方法的prototype属性是当这个方法被用作构造函数来创建实例时,赋给该实例的原型(内部Prototype)的对象。非常重要的一点是,要理解方法的prototype属性和实际的prototype(原型)没有任何关系。看下面一段代码和解释:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//构造器,this作为新对象返回并且它内部的[[prototype]]属性将被设置为构造器默认的prototype属性
var Circle = function(radius) {
    this.radius = radius;
    //next line is implicit, added for illustration only
    //this.__proto__ = Circle.prototype;
}

//扩充 Circle默认的prototype对象的属性因此扩充了每个由它新建实例的prototype对象的属性
Circle.prototype.area = function() {
   return Math.PI*this.radius*this.radius;
}

//创建Circle的两个示例,每个都可以使用相同的真正prototype所拥有属性area
var a = new Circle(3), b = new Circle(4);
a.area().toFixed(2); //28.27
b.area().toFixed(2); //50.27

那么,根据上面的定义,下面的内容非常有趣:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Function.prototype
$ function() {}
var func = new Function()
func.__proto__
$ function() {}
var functionA = function (){}
functionA.__proto__
$ function() {}
var myFunction = new Function('users', 'salary', 'return users * salary');
myFunction.__proto__
$ function() {}
Array.prototype
$ []
var arr = new Array()
arr.__proto__
$ []
var array = []
array.__proto__
$ []
Cat.prototype
$ Cat {}

原型链和instanceof

原型链又是什么?

因为每个对象和每个原型(本身)都有一个原型,我们可以想象,一个接一个的对象连接在一起形成一个原型链。原型链的终端总是默认对象(object)的原型,即Object.prototype。你可以在自定义的对象上调用__proto__方法就来自于Object.prototype.__proto__上。

1
2
3
4
5
6
7
8
9
10
function Cat(){}
var cat = new Cat()
cat.__proto__
$ Cat {}
cat.__proto__.__proto__
$ Object {}
Object.prototype
$ Object {}
cat.__proto__.__proto__ === Object.prototype
$ true

原型继承机制是内在且隐式实现的。当对象a要访问属性foo时,Javascript会遍历a的原型链(首先从a自身开始),检查原型链的每一个环节中存在的foo属性。如果找到了foo属性就会将其返回,否则返回undefined值。

1
2
3
4
5
var A = function() {};
A.prototype.constructor == A; //true

var a = new A();
a.constructor == A; //true (a 的constructor属性继承自它的原型)

instanceof与prototype有啥关系?

如果A的prototype属性出现在a的原型链中,则表达式a instanceof A会返回true。这意味着我们可以欺骗instanceof,让它失效。

1
2
3
4
5
6
7
8
9
10
11
var A = function() {}

var a = new A();
a.__proto__ == A.prototype; //true - so instanceof A will return true
a instanceof A; //true;

//mess around with a's prototype
a.__proto__ = Function.prototype;

//a's prototype no longer in same prototype chain as A's prototype property
a instanceof A; //false

使用instanceof操作符需要注意的一件事情是,任何时间判断对象是否是Object的实例,它都会返回true,因为所有对象都继承自Object.prototype。

原始值使用对象包装器判断实例时,比如 ‘foo’ instanceof String返回false。如果使用new操作符创建的字符串,instanceof返回true。所以,请记住instanceof只适用于构造函数创建返回的复杂对象和实例。

总结

看完这篇文章,你需要记住一下几点:

构造函数和普通函数没有区别,只有在结合new关键字时,有特定的作用,可以创建一个对象实例,而该对象实例有一个constructor属性指向创建它的函数,即构造函数。每个对象都有原型,不要误解Prototype属性,它是函数对象的属性(比如Object,Array,Function),真正的原型通过Object.getPrototypeOf(object)和__proto__获取。因为构造函数隐式的执行this.__proto__ = Circle.prototype,所以Prototype模式可以实现对象方法是定义(对象中的属性只是引用,指向的是构造函数Prototype属性上定义的一个方法)。

参考文献:
1.http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
2.http://www.oschina.net/translate/understanding-javascript-prototypes
3.http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/
4.JavaScript启示录