JS中constructor,prototype
First: 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的定义,大家就清楚自然了。
Then: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';
})
JS中constructor,prototype的更多相关文章
- 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- JS中的prototype、__proto__与constructor属性
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- JS中的prototype、__proto__与constructor
1.前言 作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关 ...
- JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- 论js中的prototype
今天在阅读代码时,碰到了prototype //判断是否是数组function isArray(obj) { return Object.prototype.toString.call(obj) == ...
- JS中对于prototype的理解
JS中的prototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
- JS中的prototype (转载)
JS中的prototype JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是 ...
- js中constructor和prototype
在最开始学习js的时候,我们在讲到原型链和构造函数的时候经常会有一个例子 如果我们定义函数如下: function Foo() { /* .. */ } Foo.prototype.bar = fun ...
- js中的prototype和constructor
本文正确性有待商榷,高手路过请不吝指教 1.js中只有对象,包括对象,函数,常量等. 对象不用解释.函数也有属性,常见之一就是prototype.常量也有属性: (3).__proto__;//Num ...
随机推荐
- Spring 多对对实体
package com.wangshenghua.entity; import java.io.Serializable; import java.util.Set; import javax.per ...
- Django 数据库
一.操作数据库 Django配置连接数据库: 在操作数据库之前,首先先要连接数据库.这里我们以配置MySQL为例来讲解.Django连接数据库,不需要单独的创建一个连接对象.只需要在settings. ...
- ng接口API开发文档
接口版本:v1 接口协议:请商户对接使用对应的转账接口API和免转接口API,商户只能使用菜单对应的API,否则接口会调用失败.左侧菜单未注明的接口免转钱包和转账钱包可以共同使用所有采集均按照北京时间 ...
- Python中的Nonetype类型判断
在学习过程中遇到了程序崩溃,反馈的原因是变量的类型是 Nonetype 那么如何判断该类型 if Lines is None: print(type(Lines)) 其实 Nonetype 就是No ...
- python3 字符集的应用
python3的字符集测试 s_test=u"严" print(s_test.encode('gbk')) print([s_test]) #print(s_test[]) #pr ...
- 二、点亮LED
接着上一章,本章来实现控制LED的亮灭操作: 一.驱动框架 #include <linux/fs.h> #include <linux/init.h> /* 定义文件内私有结构 ...
- Java非常好用的反射框架Reflections
MAVEN 坐标 <dependency> <groupId>org.reflections</groupId> <artifactId>reflect ...
- MacBook使用HHKB键盘设置
问题: macbook上使用hhkb的时候,很纠结档位4要不要开,开启4号DIP开关后,虽然会使HHKB键盘上减少一个“◇(Win键)”键,但是会在键盘左侧多出一个“FN”键.多出来的左“FN”键,不 ...
- 使用shared memory 计算矩阵乘法 (其实并没有加速多少)
#include "cuda_runtime.h" #include "device_launch_parameters.h" #include "d ...
- Jmeter测试出现端口占用情况
Jmeter测试会出现端口占用情况 这边在这里做个记录,每次都要百度查询,刚好需要整理下,我就也记录一份到这里吧.感谢大佬的文章. 参考文章:windows下Jmeter压测端口占用问题 因Windo ...