第二章 2.1 对象

2.1.1

对象是由一组花括号组成的数据结构，其内部可以由多对（一对）属性名（键名）：属性值（键值）组成

键名和键值是一一对应的

对象的特点：

1.对象的属性名（键值）是不能重复的

2.对象的属性名是字符串类型，其他类型会隐式转换，键值可以是任意数据类型

3.对象属性名的排列顺序：数字从小到大，字母从A-Z a-z排列

 

2.1.2对象的增删改查

查看对象的属性：person.name 或者 person[‘name’]

添加对象的属性：person.a = ‘b’  或者 person[‘a’]=’b’

修改对象的属性：person.a=’c’   或者 person[‘a’]=’c’

删除对象的属性：delete person.name

 

 

以上的都是一个固定的值，我想是一个变量，此时是配合函数使用

 

var obj={a:2,b:3}

 

　　function va(dom,num){

 

　　return dom["a"] //返回 2 和下面的写法一样

 

　　return dom.a //返回 2 这个值是死的，固定的值

 

　　return dom[num] //返回 3 因为这是一个变量

 

}

 

va(obj,'b') 　　//对象的属性名是字符串

 

 

2.1.3 通过for in拿到对象中的属性名和属性值

　　var person ={                     person算是个对象

　　　　name:"ora",

　　　　age:25,

　　　　sex:"男",

　　　　habbit:"打球",

}

　　for(var a in person){          

　　　　console.log（person[a]）

}     

a变量存放的是对象的属性名，[a]代表属性值

例： var obj1={};

　　var obj2={};

　　var obj={};

　　obj[obj1]=345;

　　console.log(obj[obj2])

因为obj2要做为obj的属性值，所以要变成字符串

obj[obj2] ----> obj[object Object]=345

obj[obj2]--->obj2是一个变量，表示查询obj对象上面的obj2属性名

 

1.对象里面的属性值还可以创建自己的对象，属性值可以放任何数据类型

也可以存放函数

2.对象属性里面存的属性值是一个函数，我们就把这个属性称为对象的方法

var aiqi={
name:"考拉",
age:16,
child:true,
peiou:{
name:"母考拉",
age:10,
son:{
name:"小考拉",
age:2,
}
}, 
wife:function(){ 
aiqi.peiou={ //就是把aiqi的配偶换掉
name:"小奶狗",
age:20,
son:{
name:"小aiqi",
age:10
}
}
}
}
console.log(aiqi.peiou.son.age)
// aiqi.wife()

 

3.对象的增删改查变量写法

obj[属性名的变量]=属性值的变量　　中括号表示里面放着一个变量

 

 

obj[newArr[0]] = newArr[1];

中括号里面装的一个是变量，把newArr[0]作为obj对象的属性名，newArr[1]作为obj的属性值，其实就是往obj对象里面添加属性名和属性值

 

以下是数值是固定的

var obj = {}  

obj.a='b' --->往数组中添加

 

2.1.4 this

this和arguments一样都是函数内部的关键词，只能在函数内部使用

函数的预编译四步：

1.创建AO对象   ==> Activated Object(活动对象)

2.找到形参和变量，把形参和变量作为AO对象的属性名，值是undefined

3.实参把值赋给形参

4.在函数中找到函数声明，把函数名作为AO对象的属性名，值是函数体

5.this -- > window (默认)

结论：

this是一个对象，它指向了调用函数的那个对象

1.只要是函数名字加上()执行， this 指向-->window

2.通过对象调用了函数， this 指向--> 调用函数的对象

执行JS代码

① 结论第二条

 

 

② 结论第一条

 

 

③结论第一和第二条

var age = 'name';

var obj ={

    name='zhufeng',

    age:8

};

console.log(obj.age); //=> 8

console.log(obj['age']);// =>8

console.log(obj[age]); //=>obj[age变量] =>obj['name'] =>获取name属性名的属性值 =>"zhufeng"

 

 

2.call && apply方法：在函数执行时,修改this的指向

1.call && apply方法的区别

fn.call(对象,实参1，实参2,实参3)

fn.apply(对象,[实参1，实参2,实参3]) 数组每个值一一对应上面函数的形参

这两个方法传参的方式不同，apply只能传数组，括号的第一个值就是改变this指向的值

2.undefined null 无法修改this指向 

2.1 call和apply写法，apply只能用数组格式传参

本来是指向windows，加了call，变了

 

例1：

function add(c,d){
/*  AO{ 
c:undefined-->3
d :undefined-->4
this:obj
}
*/
return this.a+this.b+c+d;
}
var obj={
a:1,
b:2
}
console.log(add.call(obj,3,4)) //-->1+2+3+4
console.log(add.apply(obj,[5,6])) //-->1+2+5+6

//add.call(obj,3,4)等价于return后面的值，然后直接打印，省了一步

 

 例2：

var obj = {
                foo:'bar',
                fun:function(){ 
                /*
                    AO{
                    this:obj
                    self:undefined-->obj
                    }
                */
                    var self = this;
                    console.log('this.foo='+this.foo);  //'this.foo=bar'
                    console.log('self.foo='+self.foo);  //'self.foo=bar'
                    (function(){
                     /*
                     *   AO{
                     *   this:window
                     * }
                     * */
console.log('this.foo='+this.foo);  //'this.foo=undefined'
console.log('self.foo='+self.foo);  //'self.foo=bar' 去父级AO找
})()
                }
            }
            obj.fun();

 

例3

(function(){
             /*
                 GO{
                     b:3
                 }
             *   AO{
             *       a:undefined-->3
             *       this:window
             * }
             * */
// b = 3;
             // var a = b;
                var a = b = 3;
            })() //检测一个不存在的变量 结果是 'undefined'
            
              console.log(typeof a !=='undefined'); // 'undefined'!=='undefined'                                                    --> false
              console.log(typeof b !=='undefined'); //'number'!=='undefined' 
-->true

 

例4：

/*   GO{
                a:undefined-->1(执行js代码)
                add:function add(n){ //找到函数声明覆盖了
                    AO{
                        n:undefined z
                        找到实参 a=1-->n=1
                    }
                    return n=n*5; -->n=5
                }
                n=5赋值给y,y=5(暗示全局变量)，接着执行z=add(a)
                z:5
            }   */
            var a = 1;
            function add(n){
                return n=n+3;
            }
            y = add(a);
            function add(n){
                return n=n*5;
            }
            z = add(a);
            console.log(y,z);

 

获取数组的第0项