数据类型、引用类型和值类型的内存分配、多种方式创建对象

数据类型及检测方式

数据类型：

1、数值型---number

2、布尔型---boolean

3、字符串型----string

4、对象----object

5、数组---array

6、空值----null

7、undefined----未定义

如何判断数据类型：

1、typeof：type是最常见的判断数据类型的一种方式，但是对于对象的判断，无论引用什么类型的对象，它都返回object,如下图

console.log(typeof {}) //object
console.log(typeof []) //object

2、toString.call:相对于typeof，toString.call对于数据和对象的判断就更加精确了，如下图：

console.log(toString.call({})) //[object Object]
console.log(toString.call([])) //[object Array]

引用类型和值类型

值类型内存分配：

var a = 2
var b = a
var a = 5
console.log(a) //5
console.log(b) //2

把一个值类型a 赋值给b时，其实是分配了一块新的内存空间，因此改变a的值对b没有丝毫影响，其中值类型包括字符串、数值型、布尔型、undefined

引用类型内存分配：

var array1 = ['红色','黑色']
var array2 = array1
console.log(array1[0]) //红色
console.log(array2[0]) //红色
array1.push('蓝色')
console.log(array2.length) //3

当把引用类型的值赋值给另一个值时，会生成一个数组，数组包含一个地址，地址指向array1，当你通过改变array1的值，这种变化也会反映到array2上。

其本质是引用类型会分配两个区域：一个保存地址，一个保存内容

引用类型包括：函数，数组，对象，null

如下图所示：

总结：

1. 值类型赋值，会重新分配内存
2. 引用类型赋值其实赋的只是指针

多种方式创建对象：

工厂模式：

//==================================================//
            /* 产品工厂*/
	//改造成工厂模式 --产品工厂
    //第一步：创建工厂
	function CreatProduct(data){
	   var obj = new Object();
       obj.name = data.name
       obj.description = data.des
       obj.zhekou = data.zhekou
       obj.original= data.price
       obj.price = data.youhuijia
       obj.sales = data.sales
       return obj;
	}
   //第二步：食品加工、
   //原料
   var source = {name:'iphone7',price:6000,des:'手机中的战斗机',youhuijia:3000,sales:50000,zhekou:5.5}
   //使用工厂加工原料
   var p = CreatProduct(source)
   //第三步:使用加工出来的实例
   name.innerHTML = p.name
   price.innerHTML = p.original
   des.innerHTML = p.description
   youhuijia.innerHTML = p.price
   zhekou.innerHTML  = p.zhekou
   sales.innerHTML = p.sales

工厂模式创建对象的优点：

1. 没有显式的创建对象--不需要new
2. 没有return语句

构造函数创建对象：

var Role =function(name) {
		this.name=name;
        this.name2={nickName:'剑侠客',accountName:'876791562@qq.com'}
		this.age=1111;
	   //存在的问题 -- 前面我们已经深刻讲解了
		this.attack=function() {
			 alert('11111');
		}   
	}

存在的问题：

实例化不同对象时，不同对象可能存在相同的方法，每次实例都要重新分配内存，造成内存浪费

prototype创建对象：

 var Role =function() {}
   /*姓名*/
   Role.prototype.name='';
	//生命值
   Role.prototype.HP=100;
	//魔法值
   Role.prototype.MP=100;
	//技能
   Role.prototype.technologys=['普通攻击','横扫千军','地狱火','漫天飞雪'];
	//跑起来
   Role.prototype.run=function() {
		alert('run');
	}

存在的问题：

1. 很多属性都是不同实例的各自拥有的，而不是共享的
2. 如果是值类型能正常显示，如果是引用类型就会报错，因为通过引用类型修改的是同一个内存空间，不同实例修改值会影响其他的实例

解决方式：混合模式

  var Role =function() {
        this.name = {nickName:'剑侠客',accountName:'876791562@qq.com'};
    }
    /*姓名*/
    //生命值
    Role.prototype.HP=100;
    //魔法值
    Role.prototype.MP=100;
    //技能
    Role.prototype.technologys=['普通攻击','横扫千军','地狱火','漫天飞雪'];
    //跑起来
    Role.prototype.run=function() {
        alert('run');
    }

    /*引用类型有问题 -- 通过混合方式解决*/
    var boy = new Role()
    boy.name.nickName='剑侠客'
    console.log(boy.name.nickName)
    var girl = new Role()
    girl.name.nickName = '可爱宝贝'
    console.log(boy.name.nickName)
    console.log(girl.name.nickName)

常用的创建对象的方法----第三方框架

//实例化产品详细页
var Product = Class.extend({
	init:function(){
		this.name=''
	    this.buysum = ''
	    this.desc =''
	    this.origin=''
	    this.price=''
	    this.images =[
	    {small:'../images/s11.jpg',big:'../images/s11.jpg'},
	    {small:'../images/s12.jpg',big:'../images/s12.jpg'},
	    {small:'../images/s13.jpg',big:'../images/s13.jpg'}
	    ]
	},
	//绑定基本信息
   bindDom:function(){
	 $('#pname').html(this.name)
	 $('#buyCount').html(this.buysum)
	 $('#description').html(this.desc)
	 $('#price').html(this.origin)
	 $('#groupPrice').html(this.price)

   },
   //绑定图片
   bindImage:function(){
	 //拼接
	  var str = ''
	    str += '{{each images as value i}}'
		str += '<li>'
		 str += '<img class="etalage_thumb_image" src="{{value.samll}}" class="img-responsive" />'
		 str += '<img class="etalage_source_image" src="{{value.big}}" class="img-responsive" />'
		str += '</li>'
	    str += '{{/each}}'
	    $('#etalage').html($$.artTemplate(str,this))
	   //JQuery插件实现页面幻灯片特效
         $('#etalage').etalage({
            thumb_image_width: 300,
            thumb_image_height: 400,

            show_hint: true,
            click_callback: function(image_anchor, instance_id){
                alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
            
        })
      
    },
   //普通购买
   bindBuy:function(){},
   //加入购物车
   addCart:function(){},
   //团购
   tuangou:function(){}
	
   });

 

转载于:https://my.oschina.net/u/3876057/blog/1837936