js 对象

Posted 2021-12-12 lixiuming521125

javascript 的变量分为两类值，一种是原始值，一种是引用值；

原始值有：String　Number　　Boolean　　Null　　Undefined;

引用值有：Object　　Funciton 　　Array 　　Date　　RegExp；

这里主要讨论狭义的对象；

一、对象的基本操作：增、删、改、查

 1 <script type="text/javascript">
 2         /*
　　　　　　　*对象，基础的变量类型 
　　　　　　　*字面量创建
　　　　　　　*/
 3         var techer={
 4             name:"张三",
 5             age:32,
 6             sex:"male",
 7             height:176,
 8             weight:132,
 9             tech:function(){
10                 console.log("i am teching javascript");
11             },
12             smoke:function(){//对象里面的函数叫 方法
13                 console.log("i am smoking ")
14             },
15             eat:function(){
16                 console.log("i am having dinner")
17             }
18         };
19         //查：查询对象的name属性
20          console.log(techer.name);
21          techer.tech();
22          //增 对象增加address属性 
23          techer.address = "北京";
24          console.log(techer);
25          //改 修改对象height属性
26          techer.height = 180;
27          console.log(techer.height);
28 
29          //删 删除对象的address属性
30          // delete techer.address;
31          // delete techer.eat
32 
33     </script>

a.对象中函数的访问：

 1  <script type="text/javascript">
 2        var techer={
 3             name:"张三",
 4             age:32,
 5             sex:"male",
 6             height:176,
 7             weight:132,
 8             tech:function(){
 9                 console.log("i am teching javascript");
10             },
11             smoke:function(){//对象里面的函数叫 方法
12                 this.weight--;
13                 console.log("my weight is "+ this.weight);
14             },
15             eat:function(){
16                 this.weight++;//方法访问属性 使用 this
17                 console.log("my weight is "+ this.weight);
18             }
19         };
20 techer.smoke();//执行smoke方法

21 techer.eat();//执行eat方法
22 </script>
23 

b.对象中带参函数的访问：

<script type="text/javascript">
        var attedance = {
            students:[],
            total:6,
            join:function(name){
                this.students.push(name);//这里this指代当前对象
                if(this.students.length == this.total){
                    console.log("学生已到齐！");
                }else{
                    
                    console.log(name + "到课");
                }
            },
            leave:function(name){
                var idx = this.students.indexOf(name);
                if( idx != -1){
                    this.students.splice(idx,1);
                    console.log(name + "早退");
                }
                
            },
            classOver:function(){
                this.students = [];
                console.log("已下课")
            }


        }
　　　　//执行带参函数
        attedance.join("张三");
        attedance.join("李四");
        attedance.join("王五");
        attedance.join("赵麻子");
        attedance.join("五十多分");
        attedance.join("啊啊");
　　　　 attedance.leave("李四");
　　　　 attedance.classOver();
        console.log(attedance);

    </script>

二、其他方式的对象创建

 

　　　　/*
　　　　*对象字面量 创建方式
　　　　*/
        var obj = {
            name : "张三",
            age : 35
        }
        　/*
　　　　　　*其他创建函数的方式系：1.统自带的构造函数；2.自定义构造函数
　　　　　　*/
        //1.构造函数  即 可以通过new关键字 去实例化 对象
        //a.系统自带的构造函数
        var object = new Object();//与 对象字面量 相等
        object.name = "张三";
        obj.age = 34;

        //b.自定义构造函数
        //规范是：函数名称 大驼峰
        function Techer() {
            this.name = "bb";
            this.sex = "male";
            this.weight = 130;
            this.smoke = function() {
                this.weight--;
                console.log(" my weight is " + this.weight);
            }
            this.eat = function() {
                this.weight++;
                console.log(‘my weight is ‘ + this.weight);
            }
        }
        //带参数的构造函数
        function Techerx(name, sex, weight) {
            this.name = name;
            this.sex = sex;
            this.weight = weight;
            this.smoke = function() {
                this.weight--;
                console.log(" my weight is " + this.weight);
            }
            this.eat = function() {
                this.weight++;
                console.log(‘my weight is ‘ + this.weight);
            }
        }

        //优化构造函数  相比之下的好处是，便于维护，不用关心参数的位置；
        function TecherY(opt) {
            this.name = opt.name;
            this.sex = opt.sex;
            this.weight = opt.weight;
            this.smoke = function() {
                this.weight--;
                console.log(" my weight is " + this.weight);
            }
            this.eat = function() {
                this.weight++;
                console.log(‘my weight is ‘ + this.weight);
            }
        }

        var techer1 = new Techer();
        var techer2 = new Techer();
        techer1.name = "aa";
        console.log(techer1);
        console.log(techer2);
        techer1.smoke();
        techer1.eat();

        var techerx1 = new Techerx("joy", "女", 58);
        console.log(techerx1)

        var option = {
            name : "joy",
            sex : "女",
            weight : 58
        }
        var techery1 = new TecherY(option);
        console.log(techery1)

 

面试一般会问对象创建的一般有哪几种方式？

三、通过构造器创建对象的解析过程：

 

 <script type="text/javascript">
//实例化执行过程：GO: Car = function Car(){...}
//                    car1
//                    car2
//　　　　　　　　AO:    this:{
//            　　　　　　color:color,
//            　　　　　　brand:brand    
//            　　　　　　}
//最后 默认return this; 放到 GO中
//  注意：return 原始值 无法改变return 的结果，还是 return this;,只有返回引用值，才可以改变返回类型；


        function Car(color,brand){
            this.color = color;
            this.brand = brand;
        }

        var car1 = new Car("red","Benze");
        var car2 = new Car("blue","BMW");
         console.log(car1.color);
         console.log(car2.color);

         //同理
         function Car2(color,brand){
             var me = {
                 color: color,
                 brand: brand
             }
             return me;
         }
         var car21 =  Car2("red2","Benze2");
        var car22 =  Car2("blue2","BMW2");
         console.log(car21.color);
         console.log(car22.color);
    </script>

 

四、包装类

 1 <script type="text/javascript">
 2         //包装类
 3         //原始值没有自己的方法和属性
 4         var a = 1;//原始值
 5         console.log(a);
 6         var b = new Number(a);//对象 这里的 Number就是包装类，系统一共提供3中包装类 Number String Boolean
 7         b.len = 1;
 8         b.add = function(){
 9             console.log(1);
10         }
11         console.log(b);//对象
12         //其他例子
13         var x = 123;
14         x.len = 2; //此时，系统会做的是 new Number(123).len;  然后 delete (百度各大网站都说是 没有地方保存该对象)
15         console.log(x.len);//undefined
16         var str = "123";
17         console.log(str.length)// 其实是 new String(str).length ，string 类型 系统自带他；
18 
19         var strins = "12345";
20         strins.length = 1;
21         console.log(strins)//12345 理由同上
22         
23         //特殊的:数组截断
24         var arr = [1,2,3,4,5];
25         arr.length = 3
26         console.log(arr);//数组的截断方法[1,2,3]
27     </script>

 

五、对象的遍历及链式操作

a.链式操作：

 

 1 var schedule = {
 2             wakeup:function(){
 3                 console.log("Running!");
 4                 return this;
 5             },
 6             moring:function(){
 7                 console.log("go shopping");
 8                 return this;
 9             },
10             noon:function(){
11                 console.log(" having a rest");
12                 return this;
13             },
14             afternoon:function(){
15                 console.log("sutdying");
16                 return this;
17             },
18             evening:function(){
19                 console.log("working");
20                 return this;
21             },
22             nigth:function(){
23                 console.log("sleeping!");
24                 return this;
25             }
26     }
27     
28     
29     schedule.wakeup();
30     //链式操作
31     schedule.wakeup().moring().noon().afternoon();
32     

 

b.循环遍历

 1 var arr = [1, 2, 3, 4, 5];
 2     var car = {
 3             name:‘Benz‘,
 4             color:‘red‘,
 5             width:‘2.5‘,
 6             length:5
 7     }
 8     //遍历数组
 9     for(var i = 0;i < arr.length; i++){
10         console.log(arr[i]);
11     }
12     //遍历对象
13     for(var key in car){
14         //console.log(car.key)//car.key-->car[‘key‘] -->undefined
15         console.log("key:"+car[key])
16     }
17     
18     for(var i in arr){
19         console.log(arr[i]);
20     }
21         var myLang = {
22             No1:‘html‘,
23             No2:‘css‘,
24             No3:‘javascript‘,
25             myStudyingLang:function(num){
26                 console.log()
27             }
28     }

六、对象的属性

a.hasOwnProperty:判断当前对象有没有指定的属性

 1 function Car(){
 2     this.name = "bmw";
 3     this.color = ‘red‘;
 4     this.width = "2.5";
 5     this.length = "5";
 6 }
 7 //设置原型上的参数
 8 Car.prototype = {
 9         lang:5,
10         width:2.5
11 }
12 
13 var bmw = new Car();
14 console.log(bmw.hasOwnProperty("name"));
15 for(var key in bmw){
16     //只打印对象本身的属性，不打印原型上的属性
17     if(bmw.hasOwnProperty(key)){
18         console.log(key+":"+bmw[key])
19     }
20 }

b.in 和 instanceof

1 //其他判断 判断对象是否存在某个属性 (包括原型上的)
2 console.log("lang" in bmw)
3 //判断构造函数 A对象的原型到底有没有B的原型 只要有重合 都是true
4 console.log(bmw instanceof Car)