JS-对象及普通函数中的this

「这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战」

 对象的简单介绍
    
    建立方法1: 字面量方法
        对象 = {属性:属性值 , 键名:数值}

    建立方法2: 构造函数方法
        对象 = new Object()

    对象的操作: 可以简单的理解,对象的属性,它的作用,就相当于 数组的索引下标的作用
                数组通过索引下标操作数组单元
                对象用过键名/属性 操作对象单元

    语法1:  对象[属性/键名/变量]   属性和键名,必须有引号
                                    变量不需要加引号的
                                    只有[]语法可以解析变量

    语法2: 对象.属性 / 对象.键名   不能解析变量
                                    属性/键名 可以不写引号
复制代码

一.对象的基本介绍

对象 --- 也是数据的集合
对象与数组的区别
数组是 索引值 ---> 数据
对象是 键值对形式 键名 ---> 数据  键名 = 数值 的形式

对象的 属性/键名 功能 就类似于 数组的 索引下标

对象的声明方式
        
1, 字面量方式声明
对象当中的数据,必须是键值对形式 / 属性 属性值
必须自己定义 数据的键名 和 数据的数值
键名 : 数据  
键名的命名规范 : 推荐使用英文字母,数字形式,不能以数字开头
                键名不用写引号
键名/属性 是name,存储的数据/属性值是张三
如果是多个对象,使用逗号间隔

控制台显示时,有时会按照属性的首字母来显示内容
但是不是改变程序中,属性的顺序,不用去管,不影响程序执行
    var obj = { name:'张三' , age:18 , sex:'男'};

    console.log(obj);  →  在控制台中输出顺序 age: 18  name: "张三"  sex: "男"（竖着写）

数组中,直接定义数据,索引是JavaScript程序自动添加的
    var arr = [1,2,3,4,5];
    console.log(arr);

2,内置构造函数方法
    var obj2 = new Object();
复制代码

二.对象的基本操作方法

对象的基本操作
对象的基本操作方法,与数组的基本操作方法,很相似
语法形式也差不多,有一点要特别注意

建立一个空对象
    var obj = {};

给对象新增单元  

方式1   对象变量名称['键名'] = 数值 
键名是不存在的键名,就是新增对象单元操作
使用[]语法,键名必须要添加引号

    obj['name'] = '张三';

方式2   对象变量名称.键名 = 数值
使用 .语法 ,键名不要加引号

    obj.sex = '男';

方式3   键名是变量的形式
对象新增单元的键名,是存储在变量中的
此时只能使用 [] 形式来给对象新增单元
并且此时的 变量名称 不要添加引号

如果使用 [] 语法, str变量会被解析为 age 数据内容
如果使用 . 语法, str变量不会被解析,会被直接操作为 str 键名

就类似 '变量' 不解析变量,变量名称就是字符串
`${变量}'模板字符串,解析变量的

    var str = 'age' ; 

[]语法,解析变量,添加单元键名是 age
    obj[str] = 180;

    console.log(obj);

总结
如果是变量,存储键名,必须使用[]语法
如果是正常添加,推荐使用 .点语法


调用操作  对象.键名  或者  对象[键名]
点语法不能解析变量,

数组和对象是相同的,调用不存在的键名和索引,执行结果都是undefined


console.log(obj.name);   →  张三
console.log(obj.sex);   →  男
console.log(obj['sex']);   →  男 
console.log(obj.str);   →   undefined  // 不会解析str为age,只会直接执行obj.str,执行结果是
console.log(obj[str]);   →   180  // 变量必须使用[]语法来执行


修改对象存储的数据
对已经存在的键名,进行赋值,是修改之前的数据

  


  obj.name = '韩梅梅';
    obj['sex'] = '女';
变量,只能使用[]语法,不要加引号
    obj[str] = 18;
复制代码

三.利用对象来进行数组去重

利用对象的属性,来完成数组去重

对象的属性特点:一个对象中,相同的键名,只能建立一个
再对已经存在的键名进行赋值,是修改数据操作

数组中,已经有两个单元,所以是0,1
新建立单元,索引就不能是 0,1
   


 var arr = ['北京','上海'];
    console.log(arr);

    var obj = {name:'张三'};


不会新建一个对象中的单元,键名是name
会将李四数据,覆盖以后的name键名存储的数据
  


  obj.name = '李四';
    console.log(obj);



数组去重的思路
利用对象的属性
循环遍历数组,将数组的数值获取,作为对象的键名来赋值
循环遍历之后,对象中,所有键名就是数组中的不重复数据
再循环遍历对象,将对象的键名获取,写成数组的数据

   


 var arr1 = [1,1,1,1,2,2,2,3,3,3,4,4,4,4,5,5,5];
    console.log(arr1);

获取第一个单元的数值1,作为对象的键名,建立一个单元
    var obj1 = { 1:'随便' };
获取第二个单元的数值,还是1,还作为对象的键名
此时1键名已经存在,会执行覆盖操作,不会新增一个单元
    obj1 = { 1:'随便' };
    console.log(obj1);

    var obj1 = {};
    var newArr = [];

    arr1.forEach(function(val){
        obj1[val] = '老婆,我爱你~~~';
    })

    console.log(obj1);

for...in循环对象,自定义变量中存储的是对象单元的属性
    for(var attr in obj1 ){
        // 将属性attr存储的数据写入新数组中
        newArr.push(attr);
    }
        
    console.log(newArr);


`总结思路`
**1**, 将数组的数值,作为对象的属性/键名
       利用对象不能有重复 属性/键名 的特点,去除数组重复数据
       重复数据,不会生成新的 对象的属性/键名
**2**, 将对象的 属性/键名 写成新数组的数据
复制代码

四.对象中的函数

数组中的数据,可以是任意JavaScript支持的数据类型
对象中的数据,也就是对象的属性值,也可以是JavaScript支持的任意数据类型

    var obj = {
        name:'张三',
        age:18,
        marry:true,
        o:{a:100,b:200},
        arr:['北京','上海','广州'],
        // 在对象中定义函数,类似于匿名函数
        // 函数是没有函数名称的
        // 函数的内存地址,存储在对象的属性中
        // 对象.属性()  就类似于 匿名函数 变量名称()
        // 此时是在调用函数,并且执行函数 
        fun:function(){
            console.log('我是对象中的函数')
        }
    }

    console.log(obj);
        
    obj.name ---> 张三
    obj.arr  ---> ['北京','上海','广州']
    obj.0    ---> {a:100,b:200}

    obj.fun()  // 调用并且执行存储在对象中的函数/方法


对象中的函数,调用对象的属性和属性值

    var obj2 = {
        name : '张三',
        age : 18,
        fun : function(){
            // 在对象内部的函数中,调用对象的属性和属性值
            console.log( obj2.name , obj2.age )
        }
    }

    obj2.fun();


    var woshibeichuangjiandedisangeduixiang3 = {
        name : '李四',
        age : 28,
        fun : function(){
            // 调用对象的属性,理论上应该是 对象名称.属性
            // 函数中有一个专有属性,叫this,可以起到指代的作用
            // 所谓的指代,也就代替,替换
            // 替换的内容,是调用函数之前,也就是 . 点之前的内容
            // 此时 this 指代的 就是这个对象
            console.log( this.name , this.age );

            console.log(this);
        }
    }
    此处在调用函数,点之前的内容是对象
    woshibeichuangjiandedisangeduixiang3.fun();
复制代码

五.普通函数中的this问题

普通函数中的this指向问题
所谓的普通函数,指的是 声明式  赋值式/匿名函数  对象中的函数

普通函数的 this ,指的都是 调用函数时, 点 之前,写的内容

对象中的函数 点之前是这个对象 此时 this 指向的就是这个对象

此时 函数的this 指向的就是 obj 这个对象
    var obj = {
        name:'张三',
        age:18,
        fun:function(){console.log(this)},
    };

    obj.fun();


声明式函数 匿名函数/赋值式函数

this 的指向是 window 对象

window对象,是JavaScript定义的,一个顶级对象(最大的)
JavaScript在其中定义了很多很多内容,我们可以直接调用和使用
window 本也是一个对象,  window.属性   可以调用属性值
                       window.函数   可以调用函数方法
常用的方法 alert 警告窗
因为 window 是顶级对象 , 如果调用 window 中的方法,可以不写window对象名称
        
调用 window 中的方法/函数 window可写可不写
    alert('我是弹窗内容---第一个');
    window.alert('我是弹窗内容---第二个');

声明式 赋值式/匿名函数 都是定义在 window 对象中的方法函数
调用 声明式/赋值式 函数时,理论上应该写成
window.函数名()   window.变量名()
但是 window 可写可不写
调用函数时,点之前,实际上是window
this的指向,就是window这个顶级对象

    function fun1(){
        console.log(this);
    }

    fun1();  
    window.fun1();

    var fun2 = function(){
        console.log(this);
    }

    fun2();
    window.fun2();
复制代码