js面向对象之狭义广义对象、对象与json、函数上下文

面向对象

1  什么是对象

js对象有狭义，广义对象之分

1.1  狭义对象   指的是用{}定义的对象，它是一组无序的属性集合

//描述小明    用{} 形式包裹

var p1 = {

name:"xiaoming",

age:24,

hobby:["打豆豆","睡懒觉","写代码"]

};

p1 只有三个属性，其他都没有

数组也可以存储一组数组，但是不能更好表达语义

1.2  广义对象------万物皆对象

*DOM元素是一个对象

var box = document.getElementById("box");

box.name = "xiaoming";

box.age = 23;

box.sex = "mela";

DOM方法得到一个DOM元素，此时可以用打点语法给这个元素添加属性

你不能说box这个对象只有三个属性，因为box代表一个DOM对象

*function函数也是对象

function fn() {

        alert("hello world");

    }

    fn.aa = 100;

    fn.bb = 200;

*数组是对象

var arr = [10,30,20,40];

    arr.name = "小红";

    arr.sex = "女";

    arr.hobby = ["跑步","看书","购物"];

*正则表达式(RegExp)是对象

var regexp = /\d/g;

        regexp.num = 5;

        *String() Number() 内置包装构造函数得到的值也是对象

        var str = new String("hello");

       

        1.3  基础类型不是对象

       

    2 对象和json的区别

    * json一定是对象  但对象不一定是json

    json的属性名必须要加双引号""

    普通对象对此没有要求

   

    * 下面的键(属性名)都不符合命名规范，必须加引号

    var obj = {

    "-":"-",

    "@@a":"@@a",

    "2017":"2017",

    "呵呵":"呵呵"

    }

    访问时，也必须加上双引号，用方括号表示法：obj["2017"],不能使用打点的方式

    * 两个例子：

    var obj = {

        eve:999,

        2017:888

    };

    var eve = 2015+2;

    console.log(obj.eve); // 999

    console.log(obj["eve"]);// 999

    console.log(obj[eve]); // 888 js中[]能够把变量进行隐式转换 转成字符串

    

    var obj2 = {

    "true":555,

    a: 666

    }

    var a = 7>3;

    console.log(obj2.a); // 666

    console.log(obj2["a"]); // 666

    console.log(obj2[a]);  //555

    

3 对象的方法

假如对象的某个属性值是一个函数，我们把这个属性叫做这个对象的的方法

function fn() {

    alert("我们一直很努力"); 

    }

    var obj = {

    a: 10,

    b:function() {       //即时函数

    alert("666");

    },

    c:fn,  //函数引用

    d:["关羽","刘备","诸葛亮"],

    birthday: {

    year: 2017,

    month: 10,

    day: 1

    }

    }

    

4 函数上下文--------》this

var obj = {

name : "xiaoming",

age : 21,

sex : "mela",

sayHello : function() {

alert("大家好，我是"+this.name+",我今年"+this.age+"岁了！")；

}

};

obj.sayHello();

*当一个函数当做对象的方法被调用时，这个函数里的this指的就是这个对象

所以sayHello函数的上下文就是obj对象，既函数内部this执行obj（this===obj）

var fun = obj.sayHello;

fun();

*直接用圆括号调用，不是对象打点调用，此时this===window

函数上下文是什么，取决于函数如何被调用，而不是函数如何定义

记住五条规律：

a 函数直接圆括号调用，函数上下文就是window对象

b 函数当做对象的方法被对象打点语法调用时，函数上下文就是该对象

c 函数是事件处理函数，函数上下文就是触发这个事件的对象

d 定时器调用函数，上下文是window对象

e 数组中存放的函数，被数组索引之后加圆括号调用，函数上下文this代表这个数组

5 课堂小测

两个概念：

1 arguments --- 函数的实参，是一个伪数组

2 arrguments.callee ---- 函数的形参，是一个伪数组

function fun(a,b,c,d,e) {

// this其实指的就是f函数的agruments对象 this.callee即f()的形参 

alert(this.callee.length); //值得是f的形参个数 ---2

}

function f(a,b) {

arguments[0](10,20,30);   //规律e

}

f(fun,5,6,7);