JavaScript基础总结(中) | 青训营笔记

syrlinkstart
105 阅读7分钟

这是我参与「第四届青训营 」笔记创作活动的的第6天

一、重点内容：

  • js对象

  • js数组与函数

二、详细知识点：

前言

JS作用域

  • 全局作用域

    1. 直接编写在script标签中的js代码，都在全局作用域
    2. 全局作用域在页面打开时创建，页面关闭时销毁
    3. 全局作用域中有一个全局对象window，它由游览器创建我们可以直接使用
    4. 在全局作用域中，
      • 创建的变量都会作为window对象的属性保存
      • 创建的函数都会作为window对象的方法保存

  • 函数作用域

    1. 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
    2. 每调用一次函数，就会创建一个新的函数作用域，它们之间是互相独立的
    3. 在函数作用域可以访问到全局变量，全局作用域中无法访问到局部作用域的变量
    4. 在函数中要访问全局变量，可以使用window对象
    5. 在函数中不使用var声明的变量，都是全局变量

对象(引用)数据类型(地址传递)

  • Object: 任意对象
  • Function: 一种特别的对象(可以执行)
  • Array: 一种特别的对象(数值下表，内部数据是有序的)
  • Date:
  • ...

对象

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

对象分类

  • 内建对象
    1. ES标准中定义的对象，在任何ES实现中都可以使用
    2. 如：Math、String、Number、Function、Object
  • 宿主对象
    1. 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
    2. BOM DOM，这两组内的对象(例如：console.log、document...)
  • 自定义对象
    • 由开发人员自己创建的对象

对象特点

  • 对象中保存的值为属性
添加或需改属性  对象.属性名 = 属性值
读取属性        对象.属性名 (如果读取的是不能存在的属性则会返回undefined)
删除属性        delete 对象.属性名
  1. 如果要使用特殊的属性名

如下方法添加读取

对象['属性名'] = 属性值 ([]中可以传一个变量，更加灵活)
obj['var'] = 10
console.log(obj['var']);
  1. 对象的属性值可以是任意数据类型

如果一个函数作为一个对象的属性保存，那么我们称这个函数为此对象的方法(只是名称的区别)，调用这个函数就是调用对象的这个方法

比如console.log() 就是调用了console对象的log方法

对象创建

1、利用字面量创建对象

  • var obj = {}; ：创建了一个空的对象
var obj = {     /*注意：我们是利用 冒号:赋值 的方法添加对象的属性和方法*/
    name: '眠雪',           /*每个属性用 逗号, 分隔*/
    age: 19,
    sayHi: function () {        /*对象的方法声明*/
        console.log('hello');
    }
}

console.log(obj.name) == console.log(obj['name']);  /*两种访问对象成员方式*/
obj.sayHi();     /*对象的方法调用*/

2、利用 new Object创建对象

  • 使用new关键字调用的函数，是构造函数constructor
  • 构造函数是专用来创建对象的函数
  • var obj = new Object();：创建了一个空的对象
var obj = new Object();     

obj.name = '千寻';             /*每个属性用 分号; 分隔*/
obj.age = 20;
obj.sayHi = function() { 
    console.log('Hello');
}

console.log(obj.name);
console.log(obj['name']);
obj.sayHi();

3、利用构造函数创建对象

function ACG(name,element,magic) {
    this.name = name;
    this.element = element;   
    this.magic = magic;
    this.run = function() {
        console.log(element+name+' =) '+magic+' !');
    }
}
var a = new ACG('露易丝','虚无','Explosion');
a.run()
  • 注意：
    1. 构造函数名字首字母要大写
    2. 属性一定要加this
    3. 调用函数返回的是一个对象
    4. 我们只要new 了一个构造函数，就创建了一个对象

4、小结

  • 构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某大类（cass）
  • 创建对象，如 new Stars()，特指某一个，通过new关键字创建对象的过程我们也称为对象实例化
  • new关键字执行过程
    1. new构造函数可以在内存中创建了一个空的对象
    2. this就会指向刚才创建的空对象
    3. 执行构造函数里面的代码给这个空对象添加属性和方法
    4. 返回这个对象

对象遍历

1、对象循环

  • for..in语句用于对数组或者对象的属性进行循环操作
var mx = {
    name: '眠雪',
    like: '千寻'
}
for(var k in mx) {
    console.log(k);         /*k变量输出得到的是属性名*/
    console.log(mx[k]);    /*对象[k]得到是属性值*/
}

2、in运算符

  • 通过该运算符可以检查一个对象中是否含有指定的属性 如果有返回true，否则false
  • 语法 '属性名' in 对象 console.log('name' in obj);

数组

数组：一种特殊的对象：var arr = new Array()

数组创建

1. 利用new创建数组

  • 创建一个新的空数组 var 数组名 = new Array();
  • var arr = new Array();

2. 利用数组字面量创建数组

  • 创建空的数组 var 数组名 = [];
  • 创建带初始值的数组 var 数组名 = ['小白','小黑',str,12];

注意：数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

console.log(arr)            /* 会输出这个数组的所有元素 */
console.log(arr.length)     /* 是这个数组的长度 */

数组修改

1. 可以通过修改 arr.length 的长度来实现数组扩容的目的(length属性是可读写的)

  • arr.length++ 此时数组长度+1
  • arr.length-- 此时数组长度-1

2. 可以通过修改数组索引的方式追加数组元素

  • 已知数组长度为2, arr[2] = 1; 此时数组长度为3 注意：不能直接给数组名赋值，否则会覆盖掉以前的数据

函数

函数：一种特殊的对象：var fun = new Function()

函数声明

1. function 函数名(形参1,形参2..) {函数体}

2. 函数表达式（匿名函数）

  • var fun = function(形参1,形参2..) {函数体}
  • 一个匿名函数赋值给一个变量
  • 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，函数表达式里面存的是函数

函数特点

1. return后可以跟任意数据类型

  • 如果函数中return后不跟任何值，返回undefined
  • 如果函数中不写return，返回undefined

2. 传入的参数可以是任意数据类型

  • 如果实参的个数和形参的个数一致，则正常输出结果
  • 如果实参的个数多于形参的个数，后面多余的参数不会取到
  • 如果实参的个数小于形参的个数，函数返回结果就是 NaN

3. arguments关键字

  • 当我们不确定有多少个参数传递的时候，可以用 arguments来获取.
  • 在javascript中，arguments实际上它是当前函数的一个内置对象。
  • 所有函数都内置了一个arguments对象，arguments对象中存储了所有传递的实参。
function f() {
    console.log(arguments);
    console.log(arguments.length);
    console.log(arguments[0]);
}

arguments是一个为数组，但伪教组并不是真正意义上的数组

  • 具有数组的length属性
  • 按照索引的方式进行存储的
  • 它没有真正数组的一些方法pop()、push()等等

4. 立即执行函数(函数定义完，立即被调用，只调用一次)

(function(a,b) {
    console.log("立即执行函数，只执行一次，不用写函数名，外面要加括号");
    console.log(a+b);
})(1,2);

this关键字

  • 任何函数本质上都是通过某个对象来调用的，如果没有直接指定就是window
  • 所有函数内部都有一个变量this
  • 它的值是调用函数的当前对象
  • 解析器在调用函数时每次都会向内部传递一个隐含的参数，这个参数就是this
  • 根据函数调用方式的不同，this会指向不同的对象
  1. 以函数的形式调用，this永远都是window(window.fun())
  2. 以方法的形式调用，this就是调用方法的那个对象(obj.fun())
function run() {
    console.log(this);
}

var obj = {
    name:'syr',
    f:run
}

run();   //函数的形式调用
obj.f()   //方法的形式调用

构造函数

  • 创建一个构造函数，专门用来创建Person对象的

    1. 构造函数习惯首字母大写，构造函数需要使用new来调用
    2. 构造函数会改变关键字this

  • 构造函数执行流程(var p = new Person())

    1. 立刻创建一个新对象
    2. 将新建的对象设置为函数中的this
    3. 逐行执行函数中的代码
    4. 将新建的对象作为返回值返回
function Person(name,age) {
    this.name = name;
    this.age = age;
    console.log(this);  
}
var p = new Person('颜真卿',21); //通过new调用，此时的this不是window而是Person
avatar
文章
阅读
粉丝