construtor和prototype
constructor是一个对象的属性，这个属性存在在此对象的prototype中, 指向此对象的构造函数。分析这句话
- constructor是一个对象属性。
- constructor在prototype中
- constructor指向构造函数
|
0 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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
例子1： function Person(name, age){ this.name = name; this.age = age; } Person.prototype.getName = function(){ alert(this.name); } Person.prototype.getAge = function(){ alert(this.age); } var obj = new Person(); alert(obj.constructor == Person);// true 此种方式定义的prototype, constructor是隐藏的, 默认指向Person 例子2： function Person(name, age){ this.name = name; this.age = age; } Person.prototype = { getName: function(){ alert(this.name); }, getAge: function(){ alert(this.age); } } var obj = new Person(); alert(obj.constructor == Person);// false 为什么是false? 这种定义prototype, 是把prototype重写了, 覆盖了默认的constructor。 换句话说, 其实这种方式就是给属性重新赋值了, 所以导致默认的constructor被覆盖。 此时的obj.constructor将指向的是Object。 改写一下上面的： Person.prototype = { constructor: Person, //强制指向Person getName: function(){ alert(this.name); }, getAge: function(){ alert(this.age); } } 此时constructor就指向Person了。 prototype是一个函数属性, 此属性同时也是一个对象, 保存着对象实例所共有的属性和方法。 分析这句话: 1.prototype是函数属性, 只要是函数, 就有prototype属性. 而不管是构造函数还是普通函数. 2.prototype同时也是对象. 2.prototype放的是公共的东西, 包括属性和方法. 例子1. function Person(name, age){ this.name = name; this.age = age; } //是函数就有prototype属性, 这个属性也是一个对象 Person.prototype = { getName: function(){ //所有对象实例都共享 return this.name; }, getAge: function(){//所有对象实例都共享 return this.age; } } var obj = new Person('tom', 23); obj.getName(); //'tom' var obj2 = new Person('jack', 23); obj2.getName(); //'jack' obj.getName == obj2.getName; //true, 所有实例共享 Person.prototype.getName(); //当做普通函数属性, 根据this定义, 此时this指向的是Person.prototype, 所以返回undefined 以上就是this, constructor, prototype的定义和他们之间的关系. 可能还有些粗糙, 欢迎大家补充. 综合例子: var Tinker = function(){ this.elements = []; }; Tinker.fn = Tinker.prototype = { constructor: Tinker, extend: function(obj){ var p; for(p in obj){ this.constructor.prototype[p] = obj[p];//此处若看明白了, 那么前面的就理解了 } } } Tinker.fn.extend({ get: function(){ var length = arguments.length, i = 0; for(; i < length; i++){ this.elements.push(document.getElementById(arguments[i])); //此处若看明白了, 那么前面的就理解了 } return this;//此处若看明白了, 那么前面的就理解了 }, each: function(fn){ var i = 0, length = this.elements.length; for(; i < length; i++){ fn.call(this.elements[i], i, this.elements[i]); } return this;//此处若看明白了, 那么前面的就理解了 } }); 这个例子其实很简单, 就是向一个对象原型添加方法.一个方法是get, 用于查找页面id. 一个是each, 用于对找到的id元素执行一个方法 //假设有id = 'data', id = 'message' var obj = new Tinker(); obj.get('data', 'message').each(function(i, item){ this.style.cssText = 'height:20px; background:#ff0000'; }) |
this
- this是对象
- this依赖函数执行的上下文
- this存在于函数中（函数调用的时候被隐式传入）
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
alert(this); //在全局环境调用this, this指向window, 输出[Object window] function Person(){ alert(this); } 方式一: Person(); // 全局环境用Person函数, this指向window, 输出[Object window] 方式二: var obj = new Person(); //把Person当做构造函数, 实例化一个对象 //此时this指向了obj, 不再指向window, 输出[Object object] function Person(){ alert(this.name); //此时无法判断this的身份 } Person(); //this在全局环境中被调用, this.name == window.name, 输出了窗口的名字 var obj = new Person(); //this在obj环境下被调用, this.name == obj.name, 由于name没被赋值, 所以输出undefined 由此可以看出, 我们在阅读代码或者写代码时，看到某个函数中定义的this时, 还无法去判断那个this身份，必须找到它依赖执行的环境(对象)。 再回头看看this的定义，大家就清楚自然了。 |