js基础总结深入(一)

芝士南瓜饼
280 阅读6分钟

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

数据类型

基本类型

NumberStringBooleanundefinednull
任意数值任意字符串true/falseundefinednull
typeoftypeoftypeoftypeof/======

对象（引用）类型

ObjectArrayFunction
任意对象特别对象（内部数据有序/数据下标）特别的对象（可以执行）
typeof/instanceofinstanceoftypeof

注意：typeof不能区别的类型:null与Object，Object和Array

相关问题

  1. undefined与null的区别?
  • undefined代表定义未赋值
  • nulll定义并赋值了, 只是值为null
  1. 什么时候给变量赋值为null呢?
  • 初始赋值, 表明将要赋值为对象\
  • 结束前, 让对象成为垃圾对象(被垃圾回收器回收)
  1. 严格区别变量类型与数据类型?

  • js的变量本身是没有类型的, 变量的类型实际上是变量内存中数据的类型

  • 变量类型:

    • 基本类型: 保存基本类型数据的变量
    • 引用类型: 保存对象地址值的变量

  • 数据对象 基本类型：保存就是基本类型的数据 对象类型：保存的是地址值

数据，变量与内存

什么是数据

在内存中可读的, 可传递的保存了特定信息的'东东'

一切皆数据, 函数也是数据

在内存中的所有操作的目标: 数据

包括（算术运算，逻辑运算、 赋值、运行函数）

什么是变量?

在程序运行过程中它的值是允许改变的量

一个变量对应一块小内存, 它的值保存在此内存中

什么是内存?

内存条通电后产生的存储空间(临时的)

一块内存包含2个方面的数据

  • 内部存储的数据
  • 地址值数据

内存空间的分类

  • 栈空间: 全局变量和局部变量
  • 堆空间: 对象

内存,数据, 变量三者之间的关系

  • 内存是容器, 用来存储不同数据
  • 变量是内存的标识, 通过变量我们可以操作(读/写)内存中的数据

相关问题

1.关于赋值与内存的问题

var a = xxx, a内存中到底保存的是什么?

xxx是基本数据, 保存的就是这个数据

xxx是对象, 保存的是对象的地址值

xxx是一个变量, 保存的xxx的内存内容(可能是基本数据, 也可能是地址值)

2.关于引用变量赋值问题

2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据

2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象

var obj1 = {name: 'Tom'}
  var obj2 = obj1
  obj2.age = 12
  console.log(obj1.age)  // 12
 function fn (obj) {
    obj.name = 'A'
  }
  fn(obj1)
  console.log(obj2.name) //A


  var a = {age: 12}
  var b = a
  a = {name: 'BOB', age: 13}
  b.age = 14
  console.log(b.age, a.name, a.age) // 14 Bob 13

  function fn2 (obj) {
    obj = {age: 15}
  }
  fn2(a)
  console.log(a.age) //13

3.关于数据传递问题

在js调用函数时传递变量参数时, 是值传递还是引用传递

理解1: 都是值(基本/地址值)传递

理解2: 可能是值传递, 也可能是引用传递(地址值)

var a = 3
  function fn (a) {
    a = a +1
  }
  fn(a)
  console.log(a) //3

  function fn2 (obj) {
    console.log(obj.name)  //tom
  }
  var obj = {name: 'Tom'}
  fn2(obj)

4.JS引擎如何管理内存

  1. 内存生命周期
  • 分配小内存空间, 得到它的使用权
  • 存储数据, 可以反复进行操作
  • 释放小内存空间
  1. 释放内存
  • 局部变量: 函数执行完自动释放
  • 对象: 成为垃圾对象==>垃圾回收器2回收
 var a = 3
  var obj = {}
  obj = undefined
  function fn () {
    var b = {}
  }
  fn()  //b是自动释放, b所指向的对象是在后面的某个时刻由垃圾回收器回收

对象

什么是对象?

多个数据的封装体

用来保存多个数据的容器

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

为什么要用对象?

统一管理多个数据

对象的组成

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

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

如何访问对象内部数据?

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

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

问题: 什么时候必须使用['属性名']的方式?

属性名包含特殊字符: - 空格
属性名不确定

 var p = {}
  //1. 给p对象添加一个属性: content type: text/json
  // p.content-type = 'text/json' //不能用
  p['content-type'] = 'text/json'
  console.log(p['content-type'])

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

函数

什么是函数

实现特定功能的n条语句的封装体

只有函数是可以执行的, 其它类型的数据不能执行

如何定义函数? 

函数声明、表达式

如何调用（执行）函数

test()                  直接调用
obj.test()          通过对象调用
new test()          new调用
test.call()/apply(obj)  通过临时让test成为obj的方法调用

定义函数
function fn1 () {   //函数声明
    console.log('fn1()')
  }
  var fn2 = function () { //表达式
    console.log('fn2()')
  }
  fn1()
  fn2()   //直接调用
  
var obj = {}
  function test2 () {
    this.xxx = '你好'
  }
  // obj.test2()  不能直接, 根本就没有
  test2.call(obj) //或者test2.apply(obj)   //可以让一个函数成为指定任意对象的方法进行调用
  console.log(obj.xxx)  //输出你好

回调函数

什么是回调函数

  1. 你定义的
  2. 你没有调
  3. 但是他最终执行了（在某个条件下或者某个时刻）

常见的回调函数

  • dom事件回调函数 ==>发生事件的dom元素
  • 定时器回调函数 ==>window
  • ajax请求回调函数
  • 生命周期回调函数
 // dom事件回调函数
document.getElementById('btn').onclick = function () {
    alert(this.innerHTML)
  }

 // 定时器回调函数
setTimeout(function () {
    alert('到点了'+this)
 }, 2000)

匿名函数自调用

  • 隐藏实现
  • 不会污染外部（全局）命名空间
  • 用它来编码js模块
  (function () { //匿名函数自调用
    var a = 3
    console.log(a + 3)
  })()

  var a = 4
  console.log(a)

  ;(function () {  //注意这里是小括号前面加了;
    var a = 1
    function test () {
      console.log(++a)
    }
    window.$ = function () { // 向外暴露一个全局函数
      return {
        test: test
      }
    }
  })()

  $().test() // 1. $是一个函数 2. $执行后返回的是一个对象

函数中的this

this是什么

任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window

所有函数内部都有一个变量this

它的值是调用函数的当前对象

如何确定this的值?

test(): --------window

p.test():-------p

new test():----新创建的对象

p.call(obj):----obj

  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();

最后

本文作为本人学习总结之用，同时分享给大家
因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！

avatar
文章
阅读
粉丝