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

代码如下:

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），若有疑问或不正之处，欢迎提出指正和讨论。

赞 (0)

相关推荐

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • 深入理解javascript构造函数和原型对象

    深入理解javascript构造函数和原型对象

    常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat = function() { console.log(this.name + "said:love you forever"); } 使用字面量创建 这样似乎妥妥的了,但是宅寂的

  • 有关于JS构造函数的重载和工厂方法

    写在前面 有时候我们希望对象的初始化有多种方式.比如通过元素组成的数组来初始化一个Set对象,而不是通过传入构造函数的参数列表来初始化它 重载overload 通过重载这个构造函数方法让它根据传入参数的不同,来执行不同的初始化方法. 复制代码 代码如下: function Set() {this.values = {}; // 用这个对象的属性保存这个集合this.n = 0; // 集合中值的个数 // 如果传入一个类数组的对象,将这个元素添加到集合中// 否则,将所有的参数都添加到集合中if

  • js封装可使用的构造函数继承用法分析

    本文实例讲述了js封装可使用的构造函数继承用法.分享给大家供大家参考.具体如下: 先来看下面这段代码 (YUI)库所用的方法: 复制代码 代码如下: function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prot

  • JS特殊函数(Function()构造函数、函数直接量)区别介绍

    函数定义 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 函数的构造语法有这三种: Js代码 复制代码 代码如下: 1.function functionName(arg0, arg1, ... argN) { statements }//function语句 2.var function_name = new Function(arg1, arg2, ..., argN, function_body);//Function()构造函数 3

  • JavaScript中使用构造函数实现继承的代码

    复制代码 代码如下: //首先创建父类 function Person(name, age, address) { this.name = name; this.age = age; this.address = address; } //创建子类 function Student(score) { this.score = score; //可以用call方法或者是apply方法调用函数的构造函数 //调用父类的构造函数,通过call方法调用Person类的构造函数.这样就会在student中

  • Javascript面向对象编程（二） 构造函数的继承

    今天要介绍的是,如何生成一个"继承"多个对象的实例. 比如,现在有一个"动物"对象的构造函数, 复制代码 代码如下: function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数, 复制代码 代码如下: function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫"继承&

  • js面向对象设计用{}好还是function(){}好(构造函数)

    在网上看了很多JavaScript的项目, 用到对象都是采用{}的形式: 例如jQuery, TinyMCE等都是形如: 复制代码 代码如下: var Dialog = { int : function() { .... }, insert : function() { .... }, pop : function() { .... } }; //调用就是: Dialog.init(); 而我自己一直使用function闭包的方式, 感觉使用内部私有成员(函数,变量)更方便: 复制代码 代码如下

  • JS中的构造函数详细解析

    在JavaScript中,任何合法的函数都可以作为对象的构造函数,这既包括系统内置函数,也包括用户自己定义的函数.一旦函数被作为构造函数执行,它内部的this属性将引用函数本身. 通常来说,构造函数没有返回值,它们只是初始化由this指针传递进来的对象,并且什么也不返回.如果一个函数有返回值,被返回的对象就成了new表达式的值.从形式上看,一个函数被作为构造函数还是普通函数执行的唯一区别,是否用new运算符. 上面的描述事实上有着更为精确的含义,这要把函数如果有返回值的情况分为函数的返回值是引用

  • JavaScript构造函数详解

    JavaScript构造函数详解

    构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 构造函数注意事项: 1.默认函数首字母大写 2.构造函数并没有显示返回任何东西.new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型. 3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回.如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回. function Person( name){ this

  • JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即"子类型.prototype = new 父类型();&qu

  • Javascript面向对象编程（三） 非构造函数的继承

    今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". 复制代码 代码如下: var Chinese = { nation:'中国' }; 还有一个对象,叫做"医生". 复制代码 代码如下: var Doctor ={ career:'医生' } 请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个&

随机推荐