javascript中的this与prototype,原型理解
JavaScript 函数调用
JavaScript 函数有 4 种调用方式。
每种方式的不同方式在于 this 的初始化。
this 关键字
一般而言,在Javascript中,this指向函数执行时的当前对象。
注意 this 是保留关键字,你不能修改 this 的值。 |
全局对象
当函数没有被自身的对象调用时, this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口(window 对象)。
该实例返回 this 的值是 window 对象:
1作为一个函数调用
实例
function myFunction(a, b) {
return a * b;
}
myFunction(10,
2); //
myFunction(10, 2) 返回 20
2函数作为方法调用
实例
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return
this.firstName + " " + this.lastName;
}
}
myObject.fullName();
// 返回 "John Doe"
注意
函数作为对象方法调用,会使得 this 的值成为对象本身。
3使用构造函数调用函数
如果函数调用前使用了 new 关键字, 则是调用了构造函数。
实例
// 构造函数:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new
myFunction("John","Doe");
x.firstName;
// 返回 "John"
构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
构造函数中 this 关键字没有任何的值。 |
4作为函数方法调用函数
在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
实例
Function myObject(){}
function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2);//返回20
function myFunction(a, b) { return a * b; }
myArray = [10,3];
myFunction.apply(myObject, myArray);//返回30
两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
闭包深入:http://www.cnblogs.com/onepixel/p/5062456.html
1 原型法设计模式
在.Net中可以使用clone()来实现原型法
原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。
2 javascript的方法可以分为三类:
a 类方法
b 对象方法
c 原型方法
例子:
function People(name)
{
this.name=name;
//对象方法
this.Introduce=function(){
alert("My name is "+this.name);
}
}
//类方法
People.Run=function(){
alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
alert("我的名字是"+this.name);
} //测试 var p1=new People("Windking"); p1.Introduce(); People.Run(); p1.IntroduceChinese();
prototype是什么含义?
javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。
A.prototype = new B();
理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。
先看一个实验的例子:
function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
}
} function extendClass()
{
} extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg
我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。
extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。
那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?
下面是扩展实验2:
function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
}
} function extendClass()
{
this.showMsg =function ()
{
alert("extendClass::showMsg");
}
} extendClass.prototype = new baseClass();
var instance = new extendClass(); instance.showMsg();//显示extendClass::showMsg
实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。
那么又会有一个新的问题:
如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?
3 obj1.func.call(obj)方法
意思是将obj看成obj1,调用func方法
答案是可以使用call:
extendClass.prototype = new baseClass();
var instance = new extendClass(); var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg
这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用,调用它的对象方法showMsg”
好了,这里可能有人会问,为什么不用baseClass.showMsg.call(instance);
这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法
最后,下面这个代码如果理解清晰,那么这篇文章说的就已经理解了:
<script type="text/javascript"> function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
} this.baseShowMsg = function()
{
alert("baseClass::baseShowMsg");
}
}
baseClass.showMsg = function()
{
alert("baseClass::showMsg static");
} function extendClass()
{
this.showMsg =function ()
{
alert("extendClass::showMsg");
}
}
extendClass.showMsg = function()
{
alert("extendClass::showMsg static")
} extendClass.prototype = new baseClass();
var instance = new extendClass(); instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg
instance.showMsg(); //显示extendClass::showMsg baseClass.showMsg.call(instance);//显示baseClass::showMsg static var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg </script>
转载于 http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html
javascript中的this与prototype,原型理解的更多相关文章
- prototype原型理解
一切都是对象,对象是若干属性的集合 数组是对象.函数是对象.对象还是对象.对象里面的一切都是属性,只有属性,没有方法.方法也是属性. 一切引用类型都是属性 怎么判断一个值是否是对象? 值类型的类型 ...
- JavaScript中call,apply和prototype
[TOC] call()方法 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 如果没有提供 thi ...
- Javascript中的继承与Prototype
之前学习js仅仅是把w3school上的基本语法看了一次而已,再后来细看书的时候,书中会出现很多很多没有听过的语法,其中一个就是js的继承以及总能看到的prototype.我主要在看的两本js书是&l ...
- 关于Javascript中通过实例对象修改原型对象属性值的问题
Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...
- 【转】JavaScript中的constructor与prototype
最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...
- Javascript中的__proto__、prototype、constructor
今天重温了下Javacript,给大家带来一篇Javascript博文,相信对于Javacript有一定了解的人都听过prototype原型这个概念,今天我们深度的分析下prototype与__pro ...
- javascript学习:闭包和prototype原型使用基础
闭包 function Person(name) { this.Username = name; var Userage = 18; //通过这种方法可以模拟私有成员 //类似于private成员 t ...
- JavaScript中对null和undefined的理解
前沿: 今天工作中遇到了监视一个变量是undefined,结果判断写的是==null 返回值是true,这个结果引起了我对这两个东西的兴趣. 查询了相关的文章理解并测试了.发现有以下特点: 1.广义上 ...
- JSON 在JavaScript 中的应用及自己的理解
[对象和json]JSON:JavaScript 对象表示法(JavaScript Object Notation).JSON 是存储和交换文本信息的语法.类似 XML.JSON是一种数据格式,不是一 ...
随机推荐
- glOrtho、glFrustum && glPerspective
glOrtho :正交投影,摄像机可以位于裁剪体内,所以near和far可以取两个正值或者一正一负 glFrustum :透视投影,摄像机不可以位于裁剪体内,所以near和fa ...
- dd命令使用详解
dd命令使用详解 http://www.cnblogs.com/qq78292959/archive/2012/02/23/2364760.html 1.命令简介 dd 的主要选项: 指定数字的地方若 ...
- linux截取指定字符shell cut awk
[root@mylab demo]# echo $var939f61b61978a589d9873e9ea7fdf201b213dec2[root@mylab demo]# echo ${var:0: ...
- Trace-导出已有的服务器端跟踪
跟踪(Trace)常被我们用来检查性能问题.通常我们会有针对CPU.Duration.Reads的创建跟踪定义,这一类的脚本一般不会包含太多的事件和列,筛选条件也相对简单.假如某一天你使用GUI定义了 ...
- Mac OS—苹果搭建Android开发环境
如何在MAC OS X 安装Android SDK 我以往用的开发环境都是以MAC OS安装VMware来跑不同的Windows OS,目前慢慢的将所要开发的项目由以往的传统的Wintel转移到Mob ...
- sublime 垂直编辑
http://www.sublimetext.com/docs/2/multiple_selection_with_the_keyboard.html
- ReactiveCocoa的使用方法
http://www.open-open.com/lib/view/open1440060663129.html best praticse https://github.com/ReactiveCo ...
- AWR--导出AWR数据
SQL> create or replace directory expdp_dir as '/home/oracle/dump'; Directory created. SQL> @$O ...
- jQuery 扩展功能
源码如下: /*! * 说明:Jquery库扩展 * 创建时间: leo 2016/10/13 */ (function (window, jQuery, undefined) { jQuery.ex ...
- manacher 最长回文子串
确定当前已知能匹配到的最长处,看是否要更新最长 #include <bits/stdc++.h> using namespace std; const int N = 210005; in ...