zoukankan      html  css  js  c++  java
  • 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原型属性。这个属性也是一个对象。它的用途是包括能够由特定类型的全部实例共享的属性和方法。

    例如以下图所看到的,函数的原型对象为该函数的全部实例所共享。

       

        上图中__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、原型能够实现共享但不能进行重写。会将原来的信息覆盖。

    对于重写问题。能够採用原型+构造函数结合来各司其职。后面再做具体总结。

       

  • 相关阅读:
    C++强制类型转换操作符 const_cast
    URL的UTF-8 decode
    react-8 路由
    react-7 条件渲染与列表渲染
    react-6 react 生命周期
    react-5 受控组件,非受控组件与高阶函数
    react-4 react 组件的三大属性
    react-3 JSX 语法
    react-2 react环境搭建
    react-1 React
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/7150122.html
Copyright © 2011-2022 走看看