JavaScript 构造函数 面相对象学习必备知识_js面向对象

复制代码 代码如下:

function A(x)
{
this.x = x;
}
var obj = new A(5);
alert(obj.x);

这段代码十分简单,但是我们重要的是看到了一个十分惊讶的结果,obj被我们赋予了一个属性x,就如同我们在C#中使用某个类的实例的时候一样。那么这个属性是怎么样产生的呢?

关键语句:this.x=x。这句话就是进行一个属性的申明与赋值,这里,我们肯定会问到,this是什么?为什么可以使用this.x来进行申明与赋值属性呢?

其实this代表的就是我们刚刚实例化出来的obj,就相当于我们使用obj去调用了构造函数A里面的属性、方法等等。

那么,我们怎么样去在构造函数中定义一个方法呢?

复制代码 代码如下:

function A(x,y)
{
this.x = x;
this.y = y;
A.prototype.FunX = function(){alert(x)};
A.prototype.FunY = function(){alert(y)};
}
var obj = new A(5,10);
alert(obj.x);
alert(obj.y);
obj.FunX();
obj.FunY();

执行的结果十分简单,弹出5、10、5、10的结果,可以看到

复制代码 代码如下:

A.prototype.FunX = function(){alert(x)};
A.prototype.FunY = function(){alert(y)};

这两句代码定义了两个方法,分别是FunX和FunY。那么,如果现在出现了一种情况,如果我们需要临时的给A函数添加方法怎么办呢?

复制代码 代码如下:

function A(x,y)
{
this.x = x;
this.y = y;
}
A.prototype.FunX = function(){alert("5")};
var obj = new A(5,10);
alert(obj.x);
alert(obj.y);
obj.FunX();
A.prototype.FunY = function(){alert("10")};
obj.FunY();

运行这段代码,我们可以看到,弹出的结果还是和以前的结果一样,但是我们将两个方法都定义在了外边,而且方法FunY是定义在实例化之后的,那么这里大家看出来了什么没?很显然,在我们使用obj.FunY()语句时候,代码会重新的去构造一下obj,然后再来执行此方法,那么如果代码改成这样?

复制代码 代码如下:

obj.FunY();
A.prototype.FunY = function(){alert("10")};

很显然,FunY()就不会去执行方法了。

下一遍,将会说一下关于JavaScript的构造函数与原型(prototype),若有疑问或不正之处,欢迎提出指正和讨论。

时间: 2024-09-20 13:45:50

JavaScript 构造函数 面相对象学习必备知识_js面向对象的相关文章

javascript 类定义的4种方法_js面向对象

复制代码 代码如下: /* 工厂方式--- 创建并返回特定类型的对象的 工厂函数 ( factory function ) */ function createCar(color,doors,mpg){ var tempCar = new Object; tempCar.color = color; tempCar.doors = doors; tempCar.mpg = mpg; tempCar.showCar = function(){ alert(this.color + " "

javascript类型系统 Array对象学习笔记_javascript技巧

       数组是一组按序排列的值,相对地,对象的属性名称是无序的.从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名.javascript没有真正的关联数组,但对象可用于实现关联的功能 Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例.数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的 一.数组创建 与Javascript中的大多数对象一样,可以使用new操作符连同Array

javascript类型系统 Window对象学习笔记_javascript技巧

window对象是Web浏览器中javascript的一个终极兜底儿对象,在作用域中处于最末端,是一个包含所有对象的对象.所有在全局作用域中定义的属性和函数都是window对象的属性 var myStringVar = 'myString'; var myFunctionVar = function(){}; console.log('myStringVar' in window);//true console.log('myFunctionVar' in window);//true   1.

Javascript 构造函数详解_基础知识

一.什么是构造函数 在一些面向对象的语言,如Java.C++.PHP中,构造函数是很常见的.在Javascript中构造函数首先是一个普通的函数,它可以使用new 操作符来调用,并生成一个特殊类型的对象. 复制代码 代码如下: // "Benjamin" is a constructor var benjamin = new Benjamin("zuojj", "male"); 在上面这个实例中benjamin是一个Benjamin对象,那么它是

javascript 对象入门实例教程_js面向对象

1:构造函数法 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 注解: 1:这里定义了一个Dog对象(在javascript中,函数就是对象,这里function Dog(name,weight) 同时也是构造函数),用new关键字创建了一个对象实例dog. 2:其中_name._weight._show._sex为实例dog的属性.可以通过:实例名.属性名 或 实例名["属性名"]访问实例属性,即dog._name=dog["_name"]. 3:在构

浅析javascript操作 cookie对象_基础知识

Cookie 对象 是一种以文件(Cookie文件)的形式保存在客户端硬盘的Cookies文件夹中的数据信息(Cookie数据).Cookie文件夹中的用户数据信息(Cookie数据).Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取.(不允许进行跨域的访问) Cookie文件的格式: NS:Cookie.txt IE:用户名@域名.txt javascript 写入Cookie 格式: documen

关于javascript function对象那些迷惑分析_js面向对象

js中function对象是一个令人着迷的东西,但由于他太过于灵活,常常令人迷惑,下面我贴一些代码: 大多数人这样简写: 复制代码 代码如下: function test () {} <jsvascript语言精粹>整本书这样写: 复制代码 代码如下: var test = function () {} 函数可以立即运行并赋值: 复制代码 代码如下: var test = function () {} () // test === undefined var test2 = function

JavaScript window.location对象_基础知识

经常使用window.location,它的结构总是记不住,简单梳理下,方便以后查询. 示例 URL:http://b.a.com:88/index.php?name=kang&when=2011 属性 含义 值 protocol: 协议 "http:" hostname: 服务器的名字 "b.a.com" port: 端口 "88" pathname: URL中主机名后的部分 "/index.php" search:

讨论javascript(一)工厂方式 js面象对象的定义方法_js面向对象

复制代码 代码如下: //60年代的汽车工厂 var ocar=new Object; ocar.color="black"; ocar.doors=2; ocar.pinpai="解放"; ocar.showPinpai=function() { alert(this.pinpai);//需要一个生产线,生产一个汽车,再生产下个汽车还需要建立新的生产线 } //70年代的汽车工厂 function createcar() { var oTempCar=new Ob