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>
同一时候。构造函数能够进行对象冒充,来改变对象自身的作用域。实现自身所不能实现的行为。
但同一时候,又引出了另外一个问题。构造函数体内对于引用类型数据引用地址出现不一致现象,这说明在内存中对于全然相等的两个或多个数据,要用相应大小的内存来盛放。这样无疑造成了内存浪费现象。当然,我们能够採用在构造函数体外将引用类型进行单独声明。可是这样的方法封装性非常差。非常easy被外界恶意调用。所以,这里JS中用到了原型。
二、原型
JS中创建的每个函数都有一个prototype原型属性。这个属性也是一个对象。它的用途是包括能够由特定类型的全部实例共享的属性和方法。
例如以下图所看到的,函数的原型对象为该函数的全部实例所共享。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ3l5MTMw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="229" width="449">
上图中__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、原型能够实现共享但不能进行重写。会将原来的信息覆盖。
对于重写问题。能够採用原型+构造函数结合来各司其职。后面再做具体总结。
JS基础——构造函数VS原型的更多相关文章
- JS中构造函数与原型对象的同名属性,实例会取哪一个
构造函数与原型对象的同名属性,实例会取哪一个? 看了下面的过程,再回忆JS高程3里关于这部分的示意图.实例my在new的时候,本身就获得了a属性,所以my.a是1,倘若在new的时候如果没有赋予a属性 ...
- JS高级---构造函数通过原型添加方法,原型的作用: 共享数据, 节省内存空间
JS高级---构造函数,通过原型添加方法,原型的作用: 共享数据, 节省内存空间 构造函数 //构造函数 function Person(sex, age) { this.sex = sex; thi ...
- js基础例子dom+原型+oop基础知识记录01
//oo:概念是计算机中对于现实世界的理解和抽象的方法 //由计算机利用编程技术发展到现在的产物 //面向对象几要素 //对象:由属性和方法组成的集合 //属性:保存数据,存储在对象内存空间中的唯一的 ...
- JS基础:基于原型的对象系统
简介: 仅从设计模式的角度讲,如果我们想要创建一个对象,一种方法是先指定它的类型,然后通过这个类来创建对象,例如传统的面向对象编程语言 "C++"."Java" ...
- js中构造函数的原型添加成员的两种方式
首先,js中给原型对象添加属性和方法. 方式一:对象的动态特效 给原型对象添加成员 语法:构造函数.prototype.方法名=function (){ } 方式二:替换原型对象(不是覆盖,而是替换, ...
- 前端总结·基础篇·JS(一)原型、原型链、构造函数和字符串(String)
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 【js基础】创建对象的几种常见模式(工厂模式,构造函数模式,原型模式,构造原型组合模式)
一.工厂模式 缺点:没有解决对象识别的问题 优点:解决了创建多个相似对象的问题 function createPerson(name,age,job){ var o = new Object(); o ...
- JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...
- JS基础-该如何理解原型、原型链?
JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...
随机推荐
- Java-替换字符串中的子字符串
自顶一个repace方法 package com.tj; public class MyClass implements Cloneable { public static void main(Str ...
- 面试准备——JVM相关
https://www.cnblogs.com/goody9807/p/6511480.html https://www.cnblogs.com/java1024/p/8594784.html htt ...
- 【LeetCode】Reorder Log Files(重新排列日志文件)
这道题是LeetCode里的第937道题. 题目描述: 你有一个日志数组 logs.每条日志都是以空格分隔的字串. 对于每条日志,其第一个字为字母数字标识符.然后,要么: 标识符后面的每个字将仅由小写 ...
- .NET重构(五):存储过程、触发器和函数的区别
导读:在触发器的学习过程中,师傅讲了它的耦合性高,建议我能用存储过程,那到底什么是存储过程呢,自己也不是特别了解,还有就是,触发器也算是一种特殊的存储过程,为什么就不建议多用呢?接下来,就谈谈触发器. ...
- BZOJ 1813 [Cqoi2017]小Q的棋盘 ——树形DP
唔,貌似以前做过这样差不多的题目. 用$f(i,0/1)$表示从某一点出发,只能走子树的情况下回到根.不回到根的最多经过不同的点数. 然后就可以DP辣 #include <map> #in ...
- BZOJ 4503 两个串 ——FFT
[题目分析] 定义两个字符之间的距离为 (ai-bi)^2*ai*bi 如果能够匹配,从i到i+m的位置的和一定为0 但这和暴力没有什么区别. 发现把b字符串反过来就可以卷积用FFT了. 听说KMP+ ...
- [luoguP3668] [USACO17OPEN]Modern Art 2 现代艺术2(栈)
传送门 还是一个字——栈 然后加一大堆特判 至少我是这么做的 我的代码 #include <cstdio> #include <iostream> #define N 1000 ...
- BZOJ2707 [SDOI2012]走迷宫 【概率dp + tarjan + 高斯消元】
题目 Morenan被困在了一个迷宫里.迷宫可以视为N个点M条边的有向图,其中Morenan处于起点S,迷宫的终点设为T.可惜的是,Morenan非常的脑小,他只会从一个点出发随机沿着一条从该点出发的 ...
- MATLAB(1)
前言 之前经常用MATLAB,却不小心停留在了舒适区,连基本的调试方法都没有掌握.本文主要是对MATLAB程序调试中的一般方法进行总结,也是自己学习的记录.全文大致分为三个段落: 1)代码内调试: 2 ...
- 【Codevs1227】方格取数2(费用流)
题意:给出一个n*n的矩阵,每一格有一个非负整数Aij,(Aij <= 1000) 现在从(1,1)出发,可以往右或者往下走,最后到达(n,n),每达到一格,把该格子的数取出来,该格子的数就变成 ...