js的对象与包装类

在进入本文之前,我们需要先了解一下,什么是对象,对象是什么?
其实生活中,对象我们随处可见,一棵树,一朵花,都是一个对象,对象一个是具体的,具体到某一个人,这个人就是一个对象,这个人都有人的一些公有特征(属性),都有鼻子,嘴巴等 跟 方法,比如玩耍,但同时又有自己的私有属性和方法, 比如姓名,身高等,都是自个的属性,会游泳,是自个的一个方法,总之,一个对象其实就相当于某个具体的人,把对象当成一个人,就像把属性抽象成人的特征,方法抽象成人的技能

1、对象的增删该查 操作
例子

var zhangsan= {
            name: "huang",
            age: 20,
            sex: "male",
            health: 100,
            smoke: function () {
                console.log('i am somking');
                this.health++;
            },
            drink: function () {
                console.log('i am drinking');
                this.health--;
            }
        }  

this 指的是当前对象,即zhangsan,相当于我的意思

对象属性的增加(直接在对象后面加属性)

zhangsan.wife = "xiaohon",

在这里插入图片描述
对象属性的修改(直接修改对象属性的值)

zhangsan,name = "zhangsan"

在这里插入图片描述
对象属性的查看(对象+要查看的属性)

zhangsan.name

在这里插入图片描述
对象属性的删除(在删除的对象属性前面加一个delete 操作符,写delete后面写什么删除什么)

delete  zhangsan.name

在这里插入图片描述
注意:与变量未经声明就赋值会报错不同,当访问一个不存在对象的属性的话,并不会报错,而是返回Undefined

例如
在这里插入图片描述
该语句并不存在,但在控制台打印,并无报错

2、对象的创建方法

  • 1、var obj = { } plainform 对象字面量/对象直接量
  • 2、构造函数
    • 1)系统自带的构造函数 object( )
    • 2)自定义的构造函数

用系统自带的构造函数创建的对象与对象字面量创建的对象没有任何区别

通过系统自带的构造函数产生对象

1、系统自带构造函数object()

object{
return 隐式返回
}

  var car = new object();
  car.name = "huang";

在构造函数前面加上new操作符,构造函数就能通过return 返回一个真正的对象,再通过变量接收产生的对象,但系统自带的构造函数object没有内置任何属性和方法,只能在创建好的对象中增加

2、自定义构造函数 例如 function Person ( ){ }

构造函数在结构上看起来和函数没有任何分别,因此为了区分构造函数与普通函数,构造函数的命名一般采用大驼式峰命名法,即每个单词的首字母都是大写 ,
例一:

function Car (){
            this.name = "BMW",
            this.height = "1400cm",
            this.width = "4000cm",
            this.weight = 1000
            this.health = 100;
            this.run = function(){
            	health--;
            }
        }

        var car = new Car();
        var car1 = new Car();

car 与car 1都有相同的属性(长的一样),但彼此又是相互独立的两个对象

自定义构造函数与系统自带的构造函数的相同之处在于,都需要在构造函数前面加上new操作符,然后构造函数才能通过return 一个真正的对象

自定义构造函数与系统自带的构造函数的不同之处在于,自定义构造函数可以在构造函数里添加默认属性和方法,通过这种方法,可以批量生产一些 自带默认属性和方法的对象,而系统自带的构造函数不能在里面添加一些自定义的属性或方法,只能在生产出的对象中添加

例二·:能够通过用参数自定义属性

function Car ( color ){
			this.color = color
            this.name = name,
            this.height = "1400cm",
            this.width = "4000cm",
            this.health = 100;
            this.run = function(){
            	health--;
            }
}

        var car = new Car('red' ,"BMW");
        var car1 = new Car('blue',"BYD")

在这里插入图片描述构造函数 是需要配合new才能产生构造函数的功能,否则也仅仅是一个普通的函数,有了new,才会变成构造函数,拥有了构造函数的功能,而变成构造函数之前,已经发生了隐式的三步变化。
第一步,在函数体逻辑的最顶端会生成一个 var this = { } 的空对象
第二步、往空对象里填写存在的 this .xxx= xxx; 没有则不加
第三步、隐式的返回 this return this

例如:

        function Car (){
            this.name = "BMW",
            this.height = "1400cm",
            this.width = "4000cm",
            this.weight = 1000
        }

        var car = new Car();

第一步,在函数体的最顶端生成一个 var this = { }; 相当于在函数体Car里面生成一个AO对象 this,由于this是指向对象的,因此属性的this会指向该生成的对象,也就相当于构造函数的属性和方法变成了该this对象的。也就是第二步

     function Car (){
     		var this = { }
            this.name = "BMW",
            this.height = "1400cm",
            this.width = "4000cm",
            this.weight = 1000
        }

        var car = new Car();

第二步,往this这个对象里添加属性和方法

    function Car (){
     		var this = { 
                name:name,
                height:'1400cm',
                width:'4000cm',
                weight:1000;
            }
        }

        var car = new Car();

第三步:把this这个对象隐式的return出去

    function Car (){
     		var this = { 
                name:name,
                height:'1400cm',
                width:'4000cm',
                weight:1000;
            }
            return this
        

        var car = new Car();

但需要注意的是,我们也可以通过显式的return 改变return出去的对象,显式return的会覆盖隐式return的对但显式return出去的也必须是一个对象(空对象,数组,函数等 ),如果return出去的是原始类型数值,则不执行,依旧隐式返回return this

        function Car (){
            this.name = "BMW",
            this.height = "1400cm",
            this.width = "4000cm",
            this.weight = 1000
            return {};
        }

        var car = new Car();

在这里插入图片描述

function Car (){
            this.name = "BMW",
            this.height = "1400cm",
            this.width = "4000cm",
            this.weight = 1000
            return 123;
        }

        var car = new Car();

在这里插入图片描述

包装类
我们知道,原始值(基本类型的值)没有属性和方法,只是一个值,只有对象才能有(包括对象自己,function,数组)自己的属性和方法 ,但是基本类型却有toString(),valueof()等方法,这是什么原因?

 var a = 123465;
        console.log(typeof(a.toString()) +":"+a.toString());  //string:123456

原来,对于数值类型,字符串类型,布尔类型,JavaScript 都提供了对应的包装类型。当三种类型的变量在 读取 操作的时候,JavaScript 执行引擎会自动创建一个 临时包装对象(类),帮助它可以访问包装对象的方法,使用完毕后立即销毁包装对象(类)。

var num = new Number(123);
var str = new String('abc);
var bol = new Boolean();

undefined 跟 null 没有包装类型

例題:

        var a = 123465;
        
        console.log(a.length); //4

原始类型是永远都是没有属性和方法的,因此length属性其实是调用了数值类型包装类的length属性

例题2、

 		 var str = "abc";
         str+=1;
         var test = typeof(str);
         if(test.length == 6){
            test.sign = "typeof的返回结果可能为String";
         }
         console.log(test.sign); //undefined

上面的结果为undefined,我们首先先分析下,首先定义一个变量为str,赋值为‘abc’, 与数字1相加的得‘abc1’,类型为String,在if判断语句中,String的长度确实为6,但基本类型是没有任何属性和方法的,因此test.lenght 实际上是调用了String包装类的length,然后执行if内容语句,test.sign = ‘xxx’ 相当于实例化出一个包装类sign属性,并赋予它值 ,相当于new String(test).sign = ‘xxx’, 但是,包装类一般在执行完毕后就被销毁,最终打印出的其实是再次实例化出的一个新的包装类,又相当于 new String(test).sign ,实例化一个对象test并声明属性,但并未为属性赋值
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值