js 对象

---

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

原始值有：String　Number　　Boolean　　Null　　Undefined;

引用值有：Object　　Funciton 　　Array 　　Date　　RegExp；

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

回到顶部

一、对象的基本操作：增（创建）、删、改、查

<script type="text/javascript">
        /*
　　　　　　　*对象，基础的变量类型 
　　　　　　　*字面量创建
　　　　　　　*/
        var techer={
            name:"张三",
            age:32,
            sex:"male",
            height:176,
            weight:132,
            tech:function(){
                console.log("i am teching javascript");
            },
            smoke:function(){//对象里面的函数叫 方法
                console.log("i am smoking ")
            },
            eat:function(){
                console.log("i am having dinner")
            }
        };
        //查：查询对象的name属性
         console.log(techer.name);
         techer.tech();
         //增 对象增加address属性 
         techer.address = "北京";
         console.log(techer);
         //改 修改对象height属性
         techer.height = 180;
         console.log(techer.height);

         //删 删除对象的address属性
         // delete techer.address;
         // delete techer.eat

    </script>

a.对象中函数的访问：

 <script type="text/javascript">
       var techer={
            name:"张三",
            age:32,
            sex:"male",
            height:176,
            weight:132,
            tech:function(){
                console.log("i am teching javascript");
            },
            smoke:function(){//对象里面的函数叫 方法
                this.weight--;
                console.log("my weight is "+ this.weight);
            },
            eat:function(){
                this.weight++;//方法访问属性 使用 this
                console.log("my weight is "+ this.weight);
            }
        };
techer.smoke();//执行smoke方法

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

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>

c.对象的合并：

1.方式一

var a = {a:1};

var b = {b:2};

var d = Object.assign({},a,b); // 这样不会改变原对象

console.log(a);
console.log(b);
console.log(d);

结果是;

{a: 1}
 {b: 2}
 {a: 1, b: 2}

2.方式二

var a = {a:1};

var b = {b:2};

var d = Object.assign(a,b); // 这样不会改变原对象

console.log(a);
console.log(b);
console.log(d);

 {a: 1, b: 2}
 {b: 2}
 {a: 1, b: 2}

回到顶部

二、其他方式的对象创建

 

　　　　/*
　　　　*对象字面量 创建方式
　　　　*/
        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)

 

面试一般会问对象创建的一般有哪几种方式？区别是什么？从原型的角度去回答？

回到顶部

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

 a.解析过程

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



        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>

 b.构造器的一个重要应用call apply 和bind

call 和 apply 作用差不多；只是调用方式不同；

/*
    *call/apply
    */
    function test2(){
        console.log("a");
    }
    //执行 test2，test2() --》test2.call();
    test2() ;
    test2.call();
    
    function Car(brand,color){
        this.brand = brand;
        this.color = color;
    }
    var car1 = {
        width:2.5
    };
    var car2 = {};
    Car.call(car1,"Benz","red");//car1,使用构造函数的属性，即 构造函数的this 指向了car1
    Car.apply(car2,['BMW',"blue"])//car2,同理 ,这里可以看清call和appay的用法的区别，call是直接传参，apply参数放到数组里面了
    console.log(car1);
    console.log(car2);
    
    function Computer(){
        this.plus = function(a,b){
            console.log(a+b);
        };
        this.min = function(a,b){
            console.log(a-b);
        }
    }
    
    function FullComputer(){
        Computer.apply(this);//复用了Computer的方法；
        this.mul = function(a,b){
            console.log(a*b);
        };
        this.div = function(a,b){
            console.log(a/b)
        }
    }
    
    var fc = new FullComputer();
    fc.plus(1,1);

//这里补充 bind 
bind 和 call 的用法是一样的，

Car.call(car1,"Benz","red");
等同于
var fn = Car.bind(car1,"Benz","red");
fn();
也就是说，bind 返回的是一个函数，即 fn  ;他不会立即执行这个函数，只有加了执行符号，才会执行 即fn() 才真正的取执行

call 和 apply在大型开发过程中的应用就是这样的，可以分模块的开发，再复用到某一模块中。他的原理即 改变this的指向；

如果对"改变this的指向"有疑问，可以在配合一个实例看,这里不详细展开；https://blog.csdn.net/ganyingxie123456/article/details/70855586

回到顶部

四、包装类

 

系统一共提供3中包装类 Number String Boolean

 

<script type="text/javascript">
        //包装类
        //原始值没有自己的方法和属性
        var a = 1;//原始值
        console.log(a);
        var b = new Number(a);//对象 这里的 Number就是包装类，系统一共提供3中包装类 Number String Boolean
        b.len = 1;
        b.add = function(){
            console.log(1);
        }
        console.log(b);//对象
        //其他例子
        var x = 123;
        x.len = 2; //此时，系统会做的是 new Number(123).len;  然后 delete (百度各大网站都说是 没有地方保存该对象)
        console.log(x.len);//undefined
        var str = "123";
        console.log(str.length)// 其实是 new String(str).length ，string 类型 系统自带他；

        var strins = "12345";
        strins.length = 1;
        console.log(strins)//12345 理由同上
        
        //特殊的:数组截断
        var arr = [1,2,3,4,5];
        arr.length = 3
        console.log(arr);//数组的截断方法[1,2,3]
    </script>

 

回到顶部

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

a.链式操作：

 

var schedule = {
            wakeup:function(){
                console.log("Running!");
                return this;
            },
            moring:function(){
                console.log("go shopping");
                return this;
            },
            noon:function(){
                console.log(" having a rest");
                return this;
            },
            afternoon:function(){
                console.log("sutdying");
                return this;
            },
            evening:function(){
                console.log("working");
                return this;
            },
            nigth:function(){
                console.log("sleeping!");
                return this;
            }
    }
    
    
    schedule.wakeup();
    //链式操作
    schedule.wakeup().moring().noon().afternoon();
    

 

b.循环遍历

var arr = [1, 2, 3, 4, 5];
    var car = {
            name:'Benz',
            color:'red',
            width:'2.5',
            length:5
    }
    //遍历数组
    for(var i = 0;i < arr.length; i++){
        console.log(arr[i]);
    }
    //遍历对象
    for(var key in car){
        //console.log(car.key)//car.key-->car['key'] -->undefined
        console.log("key:"+car[key])
    }
    
    for(var i in arr){
        console.log(arr[i]);
    }
        var myLang = {
            No1:'html',
            No2:'css',
            No3:'javascript',
            myStudyingLang:function(num){
                console.log()
            }
    }

回到顶部

六、对象的属性

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

function Car(){
    this.name = "bmw";
    this.color = 'red';
    this.width = "2.5";
    this.length = "5";
}
//设置原型上的参数
Car.prototype = {
        lang:5,
        width:2.5
}

var bmw = new Car();
console.log(bmw.hasOwnProperty("name"));
for(var key in bmw){
    //只打印对象本身的属性，不打印原型上的属性
    if(bmw.hasOwnProperty(key)){
        console.log(key+":"+bmw[key])
    }
}

b.in 和 instanceof

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