如何理解JavaScript的对象和函数,又怎么去操作?

221 阅读2分钟

一、JavaScript中的对象是个什么东西

1、 对象是什么?什么是对象?

1)对象是多个数据(属性)的封装体(集合)

2)可以用来保存多个数据(集合)的容器

3)一个对象代表现实中的一个事物

2、为什么要用对象?

为了能够方便统一管理多个数据

3、对象是由什么组成的?

属性: 属性名(字符串)和属性值(任意)组成

方法: 一种特别的属性(属性值是函数)

4、怎样去访问对象的内部数据?

1).属性名: 编码简单, 有时不能用

2)['属性名']: 编码麻烦, 能通用

<script type="text/javascript">
  var p = {
    name: 'zhangsan',
    age: 18,
    setName: function (name) {
      this.name = name
    },
    setAge: function (age) {
      this.age = age
    }
  }
  p.setName('lisi')
  p['setAge'](23)
  console.log(p.name, p['age'])
</script>

5、什么时候必须使用['属性名']的方式?

当属性名出现特定的字符串如-或空格,又或者当属性名不确定的时候要用到['属性名']的方式

<script type="text/javascript">
  var p = {}
  //1. 给p对象添加一个属性: ni hao: text
  // p.ni hao = 'text' //不能用
  p['ni hao'] = 'text'
  console.log(p['ni hao'])

  //2. 属性名不确定
  var propName = 'myAge'
  var value = 18
  // p.propName = value //不能用
  p[propName] = value
  console.log(p[propName])
</script>

二、函数又是个什么玩意

1、函数是什么?什么是函数?

函数是可以执行的,是为了执行nnn条代码(语句)而进行封装后的封装体

2、为什么要用函数?

首先是可以提高代码的复用,其次就是更加便于阅读交流

3、怎样去定义一个函数?

函数声明 或 表达式

4、怎样去调用(执行)一个函数?

1)test(): 直接调用
2)obj.test(): 通过对象调用
3)new test(): new调用
4)test.call/apply(obj): 临时让test成为obj的方法进行调用

<script type="text/javascript">
  /*
    判断大小
    小于10, 真小
    大于100,真大
    大于30小于60,就你了
  */
  function show (num) {
    if(num<10) {
      console.log('真小')
    } else if(num>100) {
      console.log('真大!')
    } else if(num>30 && num<60) {
      console.log('就你了')
    }
  }
  
  function fn1 () { //函数声明
    console.log('fn1()')
  }
  var fn2 = function () { //表达式
    console.log('fn2()')
  }
  
  var obj = {}
  function test2 () {
    this.xxx = 'atguigu'
  }
  // obj.test2()  没有所以就不能.
  test2.call(obj) // obj.test2()   // 可以让一个函数成为指定任意对象的方法进行调用
  console.log(obj.xxx)
</script>

三、回调函数又又是个什么鬼?

1、回调函数是什么?什么是回调函数?

是你自己定义的但是又没有调用它,但但是最后的最后它还是执行了

2、常见的回调函数?----4种

1)dom事件回调函数 ==>发生事件的那个dom元素
2)定时器回调函数 ===>window
3)ajax请求回调函数
4)生命周期回调函数

<button id="btn">点我一下</button>
<script type="text/javascript">
  document.getElementById('btn').onclick = function () { // dom事件回调函数
    alert(this.innerHTML)
  }

  //定时器
  setTimeout(function () { // 定时器回调函数
    alert('时辰到了'+this)
  }, 1000)
</script>

四、函数中的this又又又怎么理解?

1、什么是this?this是什么?

所有的函数都是需要通过某个对象来调用,但是如果没有指定对象,那就是window;
所有的函数内部都有一个this变量,谁调用就指向谁那就是谁。

2、如何确定this的值?----四种方式

test();
p.test();
new test();==>(即新创建的对象)
p.call(obj);

    <script type="text/javascript">
        function Person(color) {
            console.log(this)
            this.color = color;
            this.getColor = function() {
                console.log(this)
                return this.color;
            };
            this.setColor = function(color) {
                console.log(this)
                this.color = color;
            };
        }

        Person("red"); //this==>window

        var p = new Person("yello"); //this==>p

        p.getColor(); //this==>p

        var obj = {};
        p.setColor.call(obj, "black"); //this==>obj

        var test = p.setColor;
        test(); //this==>window

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

            fun2(); //this==>window
        }
        fun1();
    </script>

最后

写下这篇文章是为了记录学习过程中的要点,并希望借此能够起到巩固复习作用;相信不止我一人是跟着网上某些资料进行学习的,所以代码如有雷同,那也正常;代码写着或者贴出来后会比较乱,我自己看也许会感觉比较清晰,但是读者看着就会稍有迷糊,建议结合自身的学习资料和笔记对照着来看。

本人才疏学浅,文笔拙劣,如有不足之处,还请大家指正。

感谢点赞收藏