面向对象心得笔记（一）

一、面向对象 OOP: object oriented programming
对象，是一组无序的属性集合
1.狭义对象：一般用花括号定义的{ } 动态添加属性，属性也可以访问(主要还 是狭义对象)
如何访问对象属性值 1.对象.属性名 2.对象.属性名[i]
2.广义对象：window、Date日期、Math数学方法…

二、基本数据类型与引用数据类型
基本类型：number、null、undefined、string、boolean。
引用类型：对象可以通过大点方式添加属性 ，但是基本类型不可以用
区别：
1.是否可以添加、设置属性
2.在JScript中基本数据类型不能添加属性，也不能拿到属性值。只有对象类 型可以

三、json与狭义对象的区别
json是一种数据格式 //json天生为了数据而生。前端从后台拿到的的数据就基本是接送格式

 var p1 {
          "name":"xzd", 
           //属性名必须加双引号(不是单引号) ，
          //对象在这里可以不加双引号(不加双引号就是一个对象)
          "age":12
     }

json的属性必须加双引号（不是单引号），json严格的JScript对象。
一般狭义对象是不加双引号的,但是也有特殊，例如下面这个不加就不行了
(一些属性名特殊那些,不符合命名规范的我们就要加双引号，否则就报错)。

var obj {
        "~~":"2019,
        "国籍":"china",
        "2018":2018
        }

四、对象中的方法
对象不仅可以保存普通的值（静态），还可以存储函数（动态）
静态数据：1.对象名.属性名 2.对象名.属性名[i]
动态数据：1.对象名.方法() === var a = 对象.方法 (后面这个方法不能加括号()了)
这里的方法也就是对象里面的某一个属性
**五、函数上下文(重点难点)**主要就是下面5点
什么叫函数上下文？说白了就是"this"代表什么？
1.函数假如是圆括号执行，函数上下文就是window

 var a = 100;
        function fn(a,b,c,d,e,f) {
            var a = 200;
            console.log(this.a); //100
        }
        fn(1,3,5,7,9,11); 
        //函数假如是圆括号执行，函数上下文就是window  this就是window，所以a就是100

2.函数作为事件处理函数 ，函数上下文就是这个事件触发的对象

 function changeColor() {
            this.style.background = "green";
            console.log(this); // <div style="background: green;"></div> 此时this代表的是事件源 点击哪个div，this就代表该div
        }
        var divs = document.querySelectorAll("div");
        for(var i=0; i<divs.length; i++) {
            divs[i].onclick = changeColor;
            //注意这里changeColor不能写成changeColor（），绝对不能加括号
            //加了括号就是一个函数值了，而我们要调用的是这整个函数，不是一个函数值
        }

3.函数作为对象的方法，对象打点调用，那么函数上下文就是这个对象

  function say() { 函数作为对象的方法(下面的对象中正好有一个人方法是你的函数)
            console.log(this.say); // 此时this就是obj，所以this.say === obj.say
        }
        var obj = {
            name:"xzd",
            age:12,
            sex:"m",
            say:say
        }
        // say();  //空 window.say没有
        obj.say(); //xzd  对象obj来调用  函数上下文就是这个对象

4.定时器函数上下文是window，定时器里面和外面的this不一样

var divs = document.querySelectorAll("div");
    for(var i=0; i < divs.length; i++) {
        //循环遍历每一个div
        divs[i].onclick = function() {
            console.log(this); //事件外：this代表事件源<div></div>
            var that = this;   
            // 定时器外面  事件外：this代表事件源<div></div> 。所以我们先用一个变量that来把它记住。后面就用that来代替this
            setInterval(function() {
                console.log(this); //this不行， this默认就是window 怎么改？
                // this.style.background = "red"; //this === window，所以用this不行
                that.style.background = "red"; //
            },100);
        }
    }

5.函数作为数组元素，被索引出来执行，函数上下文就是这个数组

   function fn() { //该函数正好是数组中的某一个元素
            console.log(this);  //(5) [ƒ, 1, 2, 3, 4]
            console.log(this.length);  // 5
        }
        var arr = [fn,1,2,3,4]; 
        arr[0](); //小括号前面是数组，所以this就代表数组