彻底搞清JS中的this,construtor,prototype
<h2>this定义</h2> <ol> <li> <p>this是对象</p> </li> <li> <p>this依赖函数执行的上下文</p> </li> <li> <p>this存在于函数中(函数调用的时候被隐式传入)</p> </li> </ol> <pre> <code class="language-javascript">直接看例子: 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的定义,大家就清楚自然了。</code></pre> <h2>再看constructor和prototype</h2> <p>constructor是一个对象的属性,这个属性存在在此对象的prototype中, 指向此对象的构造函数。分析这句话</p> <ol> <li> <p>constructor是一个对象属性。</p> </li> <li> <p>constructor在prototype中</p> </li> <li> <p>constructor指向构造函数</p> </li> </ol> <pre> <code class="language-javascript">例子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'; })</code></pre> <p>来自: <a href="/misc/goto?guid=4959742194794135528" rel="nofollow,noindex">http://www.cnblogs.com/tinkbe...</a></p>
本文由用户 KarenI81 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!