JavaScript初阶--------对象构造函数包装类

Posted 2020-10-16

对象

　　在JavaScript里面所有的事物都是对象，如字符串、数字、数组、日期等，对象是拥有属性和方法的数据，是引用值。属性是对象相关的值，方法是能

够在对象上执行的动作。（在面向对象的语言中，属性和方法被称为对象的成员）

　　对象有一些创建方法：

1.对象字面量格式，如

 var stu = {
                name : "xiao",
                age : 18
            }

2.构造函数

　　系统有一些自带的构造函数，如new Object( );    Array( );   Number( );  Boolean( );  Date( );

var obj = new Object();

       我们可以手动向里面添加一些属性和方法

obj.name = "ming";
obj.func = function( ) { };

 3.自定义构造函数

　　自定义构造函数可以自己定义方法，适用于批量生产。

function Car(color,money){
               this.name = "daBen";
               this.color = color;
               this.money = money; 
           }
           var car1 = new Car("reg", "10w");
           var car2 = new Car("green", "20w");

 

　　car1和car2相互独立，他们是用同一个自定义构造函数car构造出来的，通过传参使他们拥有各自独特的属性。（注意，构造函数要用大驼峰式来写。）

 

---

 

 构造函数内部机理

　　1.在函数最前面隐式的加上this = { };（this为一个空对象）

　　2.执行this.xxx = xxx；

　　3.隐式地返回this对象。

　　　　　　举个栗子：

function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
        }
var person = new Person("Steven","20","male");

 

 　　

　　在person函数定义的时候，首先，会隐式地在执行上下文中添加一个名为this的空对象，然后，执行每句语句，相当于往this里面添加对象的属性和方法。最后，所有语句读执行完

的时候，隐式地把this对象返回出去。如果构造函数没有用new来引用的话，this就指向window。

 

利用构造函数内部机理进行模仿

 function f(name,age){
        var obj = {};
        obj.name = name;
        obj.age = age;
        return obj;
    }
 var uu = new f("jk", 10);

 

 

　　首先我们创建一个空对象命名为obj，然后给obj对象定义方法和属性，最后显式地把obj对象返回出去，但是这个人工的构造函数，效率等各方面都没有原生的好，而且还涉及到原

型的问题的时候，所以也是有漏洞的。

 

构造函数的拓展

　　　　将上面的代码返回值改一下看看

return 1234;//生产出来的对象是 f{}

return true;//             f{}

return “Object”;//          f{}

return {};  //              {}

 

　　

　　我们可以发现，前三个都是原来由构造函数生产出来的对象，但是对于第四个，就变成一个空对象了，意思就是，如果我们return的如果是原始值，那么对结构没影响，但是如果返回的

是一个引用值，那么结果就是return出来的那个引用值。

 

来看一个例子消化一下：

        var a = 5;
	 function test(){
		 a = 0;
		 alert(a); //      0
		 alert(this.a);//  5   undefined
		 var a ;
		 alert(a); //      0
	 }        

　　

       上述代码运行test()和new test()结果分别是什么？这里考虑的是有new的时候this的指向问题。前一个指向window，所以为5，后一个指向函数test，这使函数内部没有this.a，所以就是

undefined，其他的两个a都是函数内部的a ，所以a是0。

 

 

---

 

 

包装类

　　因为原始值是没有属性和方法的，当我们给他们加上这些时，系统会把他转化为原始值对应的对象的形式，我们将其称为包装，该原始值的对象形式就叫包装类。

将原始值变为对象形式，例如：

 

 Number ——— new Number() ————数字的对象形式
 String ———— new String() ———— 字符串的对象形式
Boolean ———— new Boolean () ———— 布尔值的对象形式

 

　　当我们给原始值添加属性的时候，JS引擎会隐式地将原始值转化为对应的对象类型，然后，进行delete操作，意思就是，当我们给一个原始值添加属性的时候，引擎将会马上删除该原始值的对象形式。

　　 例如：

var num = 123;
 num.abc = "a"; // num.abc = undefined

　

同样也来个栗子消化消化

var str = "abc";
str += 1 ;
var test = typeof(str);
if(test.length == 6){
	test.sign = "typeof的返回结果可能是String";
}
doucment.write(test.sign);

　　

　看看最后输出结果是什么？粗略一看test是String，刚刚好length就是6，打印"typeof的返回结果可能是String"，真的是这样吗，结果打印的却是undefined，why!!!原来String是原始

值，当我们给他添加完属性sign后，JS引擎就删除了它的对象形式，所以就是undefined了，这里要注意包装类问题。