JavaScript-对象，包装类

客官°小女子只卖身不卖艺 2022-05-28 12:39 190阅读 0赞

**对象**

在JavaScript中是没有类的概念的，只有对象。无论是字符串，数值，数组还是函数，其本质都是对象。

对象的创建方法:

1:var obj=\{\}    plainObject    对象字面量/对象直接量

2:构造函数

1）系统自带的构造函数 Object( )

2) 自定义的构造函数

1对象字面量/对象直接量

通过一段代码来认识一下这个过程.

var My = {
                     name: 'cyl',
                     age: 19,
                     sex: 'male',
                     food: function(myLike) {
                         console.log("I like eating "+myLike);
                     },
                     drink: function(myLike) {
                         console.log("I like drinking "+myLike);
                     }
                 }

控制台运行如下:

![70][]

ps:那个undefined表示的是函数返回值，因为没有,所以是undefined，

变量和方法用,号隔开

属性的增，删，改，查。

1:增加一个新的属性。

![70 1][]

对象.新属性=(赋值）新的属性就添加了。

2：删除一个新的属性。这里需要借助一个操作符delete

![70 2][]

delete 对象.属性就删除了，后面的true是delete的返回值

3：改变某一个属性的值

![70 3][]

对象.属性=新的值

4:查找某一个属性的值

![70 4][]

对象.属性就可以访问了，因为没有girlfriend这个属性就是undefined.

利用系统自带的构造函数 Object( )产生对象。

在一个构造函数面前加上运算符new就可以产生彼此相互独立的对象了

var Person1=new Object();
                 var Person2=new Object();

然后Person1和Person2就是俩个对象了，但是一开始里面是没有撒的，我们通过刚刚前面的四种操作来实现属性的增，删，改，查。

![70 5][]

我们用new Object()产生的对象都是彼此互相独立的，它们互相不干扰。

var obj=new Object();和var obj=\{\};  一样

自定义构成函数产生对象。

构造函数和函数结构上没有任何区别！我们只需要用操作符new来产生一个对象

function **Obj** ()\{

var my =new **Obj**() ;

![70 6][]

由于构造函数和函数没有任何区别，所以构造函数的命名需要满足“大驼峰式命名规则”（人为规定的）即但凡是是单词首字母就大写。

大驼峰式命名规则：TheFirstName

小驼峰式命名规则：theFirstName

function Obj(){
                     this.name='cyl';
                     this.age=19;
                     this.sex='male';
                     this.food=function(myLike) {
                         console.log("I like eating "+myLike);
                     }
                 }
                 var my=new Obj();

![70 7][]

每用一次new Obj()就会产生一个互相不干扰的对象。

obj()里面也可以传参数进出，用于赋值属性。

function **Obj** ( name , age , sex )\{

this . name = name ;

this . age = age ;

this . sex = sex ;

this . **food** = function ( myLike ) \{

**console** . **log**( " I like eating  " \+ myLike) ;

var my =new **Obj**( ' cyl ' , 19 , ' male ') ;

![70 8][]

同样可以用上面的四种操作符对对象进行操作。

为啥要加this然后就可以成为构造函数，产生对象了。

构造函数的内部原理。

1:在函数体前面隐式加上this\{\}

2:执行this.xxx=yyy;//往this\{\}里面加东西

3:返回this

当一个函数的前面写上new的时候就会发生上面的三步操作了

现在应该明白为什么new 函数()就会产生对象了。

ps:函数前面一定有new，不然就普通函数

模拟构造函数

看如下代码:

我们看到obj()前面没有new ，但是依然可以，因为我们函数里面已经实现了new的三步了。

![70 9][]

但是这种方法基本不用。

破坏new隐式的三步

看如下代码:

不调用return this；那么会发生什么了。

![70 10][]

没错它是空的了！！！(很明显会调用return \{\};自己都写了就不会隐式调用return this;)

一个小知识点:

function Obj(name,age,sex){
                     this.name=name;
                     this.age=age;
                     this.sex=sex;
                     this.food=function(myLike) {
                         console.log("I like eating "+myLike);
                     }
                     return 123;
                 }
                 var my=new Obj('cyl',19,'male');

将return \{\};改为return 123;结果是什么?

![70 11][]

计算机有一个规定，既然你使用了new操作符，那么你就必须返回对象，\{\}是一个空对象，对于像123（原始值）,null,undefined...等这样的原始值是直接忽略的。

**包装类**

在JavaScript中只有对象才有属性和方法，原始值是没有的。

像对象自己，function，数组..都是对象。123（原始值）,null,undefined..是原始值。

看如下代码:

var num=123;
                var Num=new Number(123);

Number()是系统的构造函数，然后使得Num变成对象了

![70 12][]

然后Num满足上面对象的操作了。

![70 13][]

注意，如果对象进行+-\*/等运算这样的操作的时候，就会变成原始值

![70 14][]

字符串啊，boolean啊，什么的同理。

下面我们看一段代码,

var str="123";
               str.abc='456';

什么咯？不是原始值没有属性方法的吗？

然而没有出错。但是

![70 15][]

并没成功！

在JavaScript中只有对象才有属性和方法，原始值是没有的！！！

那么为什么没有出错了！

计算机很聪明，知道str是原始值没有属性方法，但是又不想报错，它做了一个隐式操作：

str.abc='456' 计算机把它变成 new String(str).abc='456';

那为什么访问不到了，因为原始值没有属性这个是肯定不能打破的，然后计算机马上就把它delete了，

访问时又变成了new String(str).abc，这个是一个新对象，刚刚那个已经被delete了，这个是新的，然而没有赋值，所以undefined。

这个操作就是包装类

此时应该可以理解字符串（原始值）为什么会有length属性了，那是因为转化为String对象了,length属性String是本来有的,系统带的。会有错觉以为字符串有length属性，这是不可能的。

ps：

![70 16][]

null和undefined是绝不能有属性方法的,直接报错！

[70]: /images/20220528/3e7d8ae848984aba8c967c58b9dbfc97.png
[70 1]: /images/20220528/bbb84772cd80466096d67e0acc1c75f9.png
[70 2]: /images/20220528/252361ff95a8443aa9a500b4c380da4e.png
[70 3]: /images/20220528/03aa64652eba4581b3a49bfd358196a9.png
[70 4]: /images/20220528/2f6622242d924ed69560ba9f48f424e3.png
[70 5]: /images/20220528/dbd5c464cb1445fea85743af3db3e49b.png
[70 6]: /images/20220528/02bc2b20f2f34fdbadf88b91f965058a.png
[70 7]: /images/20220528/e9a89bb6aa0642cc8ac8f2ffc516f047.png
[70 8]: /images/20220528/de1bbe3e7fa447688c7b238d487f1389.png
[70 9]: /images/20220528/9004103e38ee4992b5df8359bd7f6745.png
[70 10]: /images/20220528/4ff8e35968ff444496ce5fc9a8b5c01a.png
[70 11]: /images/20220528/0e92697fc1c74990affa5c1d55e3e5c8.png
[70 12]: /images/20220528/0da74255610245988542873cf85cc342.png
[70 13]: /images/20220528/6ac0b4f1d9fd4e1d848a44c4c8904358.png
[70 14]: /images/20220528/ddfecbac2fa7409ea4b402854e5a4197.png
[70 15]: /images/20220528/724762bfc3f747eb99c416808ff08e50.png
[70 16]: /images/20220528/32cb8e89cc4b4d2fa1608bdfb6e3037d.png