JS基础——构造函数VS原型函数

JS是一种基于对象的语言,在使用过程中不免遇到复制对象的问题,但通常我们采用的直接赋值‘obj1=obj2’这种做法会出现数据覆盖问题。也就是对象引用过程中引用地址一致,导致对象数据被修改的问题。这时我们可以采用工厂模式来对对象进行实例化,从而实现对象的引用地址一致导致的数据覆盖问题。但此时,问题随之又来了,使用工厂模式,对于具体的实例所属的具体对象又搞不清楚,在JS中采用构造方法来解决对象实例的数据覆盖问题(这里和其它语言的原理是类似的)。

一、构造函数

在其它语言中接触过构造函数,通常它与类的名称一致。但在JS中并没有明确的‘类’这个概念。在我看来,它声明的对象从某种程度上说就是一种类,因为它的每个对象都可以有自己对应的实例。

构造函数解决数据覆盖:

<span style="font-family:KaiTi_GB2312;font-size:18px;">
	function Box(name,age){
		this.name=name;
		this.age=age;
		this.run=function(){
			return this.name+this.age+'运行中...';
		}
	}

	function Desk(name,age){
		this.name=name;
		this.age=age;
		this.run=function(){
			return this.name+this.age+'运行中...';
		} 

        }</span>

对它进行调用:

<span style="font-family:KaiTi_GB2312;font-size:18px;">	var box1=new Box('lee',22);
        var box2=new Desk('john',66);	</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">        alert(box1 instanceof Box);//TRUE
	alert(box2 instanceof Box); //可以识别具体哪个对象的实例,FALSE
</span>

同时,构造函数可以进行对象冒充,来改变对象自身的作用域,实现自身所不能实现的行为。但同时,又引出了另外一个问题,构造函数体内对于引用类型数据引用地址出现不一致现象,这说明在内存中对于完全相等的两个或多个数据,要用对应大小的内存来盛放,这样无疑造成了内存浪费现象。当然,我们可以采用在构造函数体外将引用类型进行单独声明,但是这种方法封装性很差,很容易被外界恶意调用。所以,这里JS中用到了原型。

二、原型函数

JS中创建的每一个函数都有一个prototype原型属性,这个属性也是一个对象。它的用途是包含可以由特定类型的所有实例共享的属性和方法。如下图所示,函数的原型对象为该函数的所有实例所共享。

上图中__proto__是原型对象的指针,它指向原型对象,同时constructor为原型对象的构造属性,执行具体的所属的构造函数对象。在实际应用中可以通过constructor属性来改变一个原型对象所属的构造函数对象。

为函数创建原型属性和方法:

	function Box(){} //构造函数体内什么都没有,如果有,就叫做实例属性和实例方法

	Box.prototype.name='lee';//原型属性
	Box.prototype.age=22;
	Box.prototype.run=function(){ //原型方法
		return this.name+this.age+'运行中...';
	}

用这种方法,可以解决上面遗留的引用地址不一致的问题(构造函数+原型)。

可以通过Box.prototype.isPrototypeOf(box1)来对实例所属的原型对象进行判断。同时在创建函数的原型时,也可以通过字面量的方法来创建:

Box.prototype={
	name:'lee',
	age:100,
	run:function(){
		return this.name+this.age+'运行中...';
	}
}

以上是有关JS中构造函数和原型函数的一些基础知识,小结一下:

1.构造函数在实例化时,必须使用new来操作,声明时不需要new object,隐含自身已经new了

2、构造函数可以用来解决对象实例化中数据覆盖问题,但会造成引用地址不一致问题

3、原型函数解决了引用地址不一致问题

4、但原型函数可以实现共享但不能进行重写,会将原来的信息覆盖。

对于重写问题,可以采用原型+构造函数结合来各司其职。后面再做详细总结。

时间: 2024-12-22 16:41:48

JS基础——构造函数VS原型函数的相关文章

JS中构造函数与普通函数的区别及JS构造函数、原型和实例的关系

JS中构造函数与普通函数的区别: https://www.cnblogs.com/cindy79/p/7245566.html JS构造函数.原型和实例的关系: https://blog.csdn.net/u012443286/article/details/78823955 JavaScript构造函数及原型对象: https://blog.csdn.net/a153375250/article/details/51083245 原文地址:https://www.cnblogs.com/jim

js基础知识总结:函数

函数内部的属性: arguments 和this是函数内部的两个特殊对象 arguments: function recursion(num){ if(num<=1){ return 1; }else{ return num*recursion(num-1); } } 另一种写法: function recursion(num){ if(num<=1){ return 1; }else{ return num*arguments.callee(num-1); } } arguments:表示当

js中构造函数的原型添加成员的两种方式

首先,js中给原型对象添加属性和方法. 方式一:对象的动态特效 给原型对象添加成员 语法:构造函数.prototype.方法名=function (){ } 方式二:替换原型对象(不是覆盖,而是替换,把原先的同名的直接替换成现在的) 语法:构造函数.prototype.方法名={ } tips:方式二不常用,因为这样会修改了原型本身 搜索:JS中通过构造函数添加成员方法和通过原型法添加成员方法的区别 参考网址  http://blog.csdn.net/xxmzumeng/article/det

JS基础:基于原型的对象系统

简介: 仅从设计模式的角度讲,如果我们想要创建一个对象,一种方法是先指定它的类型,然后通过这个类来创建对象,例如传统的面向对象编程语言 "C++"."Java" 等:另一种方式是,我们不需要关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样的对象,就像所有吸血鬼故事必然有一个吸血鬼祖先一样,在 "Javascript" 世界中 "Object" 对象就是这个吸血鬼祖先,所有其他对象都是继承自 "Ob

js基础知识之_函数

javascript函数 函数概念 将完成某一特定功能的代码集合起来,可以重复使用 白话函数理解-函数就是一个工厂,帮大家实现某一个功能 优点 -时程序更加简洁 -逻辑更有条例 -调用方便 -维护更加容易 函数的声明方式(创建) 1.基本语法 function 关键字 function 函数名([参数1],[参数2]....){ 函数体 [return]//返回值 } 2.字面量定义的形式(匿名函数) var 变量=function()([参数1],[参数2]....){ 函数体 [return

【JS基础巩固】原型和闭包

先上链接: 深入理解javascript原型和闭包(完结) :学习Javascript闭包(Closure) :JavaScript秘密花园 :深入理解js闭包

JS基础:高阶函数

函数声明和函数表达式 在 JS 中定义函数的方式有两种:一种是函数声明,一种是函数表达式. 例如: //函数声明 function fun() { ... } //函数表达式 var f = function() { ... } 它们的区别在于 JS 会把函数声明提升到作用域顶部,而函数表达式只有在执行到该语句时才会生效 关于函数的其他注意事项: 1.函数名后面跟圆括号 "()" 表示立即执行该函数,例如: var test = fun(); //表示执行 "fun"

JS基础-语法+流程控制语句+函数+内置对象【数组】

JS语法: Javascript基本数据类型:undefined/null/Boolean/number/string 复杂数据类型:object typeof用来检测变量的数据类型 typeof的使用方法有两种: (1)typeof 变量 (2) typeof(变量) undefined派生自null,所以undefined==null返回的结果是true 用于任何数据类型,Number()可以将非数值转化为数值,但是有一些数据是不能转化为数值的,如果这类数据通过Number()进行强制转化的

cocos2d JS 基础语法间的函数方法相互调用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } 1.函数嵌套函数 1 function calcuate(opr, a, b) { // 定义函数,opr - -> 符号,a,b - -> 数值 2 3 //定义 + 函数 4 function add(a, b){ 5 return a + b; 6 } 7 8 //定义 - 函数 9 function sub(a, b){ 10 r