彻底搞清javascript中this, constructor, prototype
说起这三个属性,肯定有一些同学和我一样,初学js时非常困惑,头大,一脸的迷茫。今天就来给大家彻底解决这些担心受怕的问题。
先看this
this定义: this就是函数赖以执行的对象。 分析这句话: 1. this是对象。
2. this依赖函数执行的上下文环境。
3. this存在函数中。 直接看例子: 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的定义,大家就清楚自然了。
再看constructor和prototype
constructor和prototype的关系非常密切。 constructor是一个对象的属性,这个属性存在在此对象的prototype中, 指向此对象的构造函数。 分析这句话:
1.constructor是一个对象属性。
2.constructor在prototype中
3.constructor指向构造函数 例子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';
})
彻底搞清javascript中this, constructor, prototype的更多相关文章
- 深入浅析JavaScript中的constructor
constructor 属性返回对创建此对象的数组函数的引用.本文给大家介绍JavaScript中的constructor ,需要的朋友参考下吧 定义和用法 constructor 属性返回对创建此对 ...
- JavaScript中的Array.prototype.slice.call()方法学习
JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意: 这个对象一定要有length属性). 但有一个例外 ...
- 【转】JavaScript中的constructor与prototype
最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...
- JavaScript中__proto__与prototype的关系
一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 1 2 3 4 5 6 7 8 9 Number.__proto__ ...
- JavaScript中的constructor和继承
概述 这是我在看JavaScript面向对象编程指南的时候,对constructor和继承的总结. 关于它们的详细知识,可以上网查到,所以我只写那些网上没有的. 内容 constructor的理解 c ...
- 【你不知道的javaScript 上卷 笔记7】javaScript中对象的[[Prototype]]机制
[[Prototype]]机制 [[Prototype]]是对象内部的隐试属性,指向一个内部的链接,这个链接的作用是:如果在对象上没有找到需要的属性或者方法引用,引擎就 会继续在 [[Prototyp ...
- JavaScript中__proto__与prototype的关系(转)
一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 1 2 3 4 5 6 7 8 9 Number.__proto__ ...
- javascript中原型(prototype)与原型链
javascript是一门动态语言(动态语言Dynamic Programming Language:动态类型语言,意思就是类型的检查是在运行时做的,也就是常说的“弱类型”语言),没有类的概念,有cl ...
- [转] 理解 JavaScript 中的 Array.prototype.slice.apply(arguments)
假如你是一个 JavaScript 开发者,你可能见到过 Array.prototype.slice.apply(arguments) 这样的用法,然后你会问,这么写是什么意思呢? 这个语法其实不难理 ...
随机推荐
- javascript去除首尾空白字符
if ( twocode.replace(/^\s+|\s+$/g,"")=="" ) { alert("二维码不能为空"); docume ...
- HDU 1028Ignatius and the Princess III(母函数简单题)
Ignatius and the Princess III Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d ...
- CentOS 有gcc没有g++
[root@localhost ~]# which gcc/usr/bin/gcc[root@localhost ~]# which g++/usr/bin/which: no g++ in (/us ...
- WCF服务中,[DataMember]属性标记的属性一定要有set访问器
WCF服务中,如果实体类中,包含有[DataMember]属性标记时,该属性一定要有set访问器.当系统必须调用到[DataMember]标记的属性时,如果该属性没有set访问器,则会出错.
- 利用URLRewriter.dll 实现ASP.NET实现伪静态
大家一定经常在网络上看到很多网站的地址后缀都是用XX.HTML或者XX.ASPX等类似静态文件的标示来操作的吧,那么大家有怀疑过他真的是一个一个的静态生成的文件么,静态文件的生成的优缺有好有坏,对于访 ...
- 网页出现scanstyles does nothing in Webkit / Mozilla的解决方法
今天ytkah要验证一些百度服务,那边的客服MM说她用ie浏览器打开网页出现"scanstyles does nothing in Webkit / Mozilla / Opera" ...
- B树、B-树、B+树、B*树---转载
B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
- ZOJ3718 Diablo II(状态压缩dp)
题意:一个人物有K(K<=7)种技能,每种技能都有bi,ci,di值,表示该技能不能点超过bi次,每点一次加ci,点满bi次有一个附加得分di.然后还有N件武器,武器本身会有能力加成,然后每个武 ...
- iOS导航栏-关闭半透明
self.navigationController.navigationBar.translucent = NO;
- centOS学习part1:操作系统安装
0 linux作为服务器的主要操作系统,在处理速度以及安全性上都要优于windows,虽然需要很多命令要记,但是一般常用的命令不多,用多了就熟悉了,而且现在很多都要图形界面,也降低了学习成本. cen ...