JavaScript基础（Vue部分前置知识点）——合适有一定编程基础的同学

JavaScript

笔记基于bilbil尚硅谷JavaScript教程

主要针对Vue前置知识学习

---

• JavaScript

  • 解释型语言——不需要编译直接运行
  • 动态语言——变量的值可以保存任意类型数据
  • 基于原型的面向对象
  • 自上往下执行

• js基础语法

  • //单行注释
  • /* 多行注释 */
  • 严格区分大小写
  • 语句用分号结尾，如果不写浏览器自动添加，但不推荐，消耗浏览器资源而且有可能出错

• js代码编写位置

  • <button onclick= "layer.msg('onclick~')">onclick按钮</button> //标签onclick属性
    <a href="javascript:alert('href~')">href链接</a> //href链接
    <script>alert('script~')</script> //script标签中
    <script src=“test.js”></script>  //外部js文件
    

• 块语句

  • 块语句（Block）用于组合零个或多个语句。该块由一对大括号 {} 界定，块内形成块级作用域，块作用域内定义的变量将在离开块作用域后立即被回收。

---

HelloWorld

document.write("hello world"); //输出在html页面显示（boby)
console.log("helo world") //输出在控制台
alert("hello world") //弹出警告框

---

变量

java中变量是弱类型， 数据类型可以被忽略，可以不声明类型直接使用，如a = 'a' ,一个变量可以赋不同数据类型的值。它允许变量类型的隐式转换，允许强制类型转换，如字符串和数值可以自动转化

• 变量的声明&赋值

  • var var age =80

    • 声明全局或函数级别作用域的变量，var声明变量可以不初始化，此时其值默认为 undefined（未定义）

  • let let age = 32

    • 使用 let 可以声明块级别作用域的变量，在块 {} 内声明的变量无法从块外访问

  • const const age = 18

    • 使用 const 声明变量时，必须给变量赋初值，该值在整个代码的运行过程中不能被修改，也可以认为const关键字声明的变量是常量

数据类型

• String——>字符串
• Number——>数值
• Boolean——>布尔
• Null——>空值
• Undefined——>未定义
• Object——>对象

对象

object类型，可以将多个基本数据类型的变量整合成为一个整体， js的对象以键值对的形式存储数据，常用的定义方法如下：

//字面量创建
var person = {
    name: "张三",
    age : 18,
    sex : '男'
}
//工厂模式创建

定义完对象及属性之后，我们就可以通过变量名.属性的方法调用

函数

函数也是对象，函数可以封装一些功能，在需要时可以执行这些功能

• 函数的创建

  • var fun1 = new Function("layer.msg('使用构造器创建一个函数')")
    function fun2() {
        layer.msg("使用函数声明创建函数")
    }
    

• 函数的参数

  • //创建
    function fun2(a,b,c) {
        console.log(a+b+c);
    }
    //调用
    fun2(1,2,3);
    

  • js调用函数时不会检查实参类型，所以需要注意非法参数

  • 调用函数时也不会注意实参的数量，多余的实参不会被赋值，如果实参的数量没有对应形参， 那没有对应的形参将会是Undefined

• 函数的返回值

  • 函数使用return返回，函数遇到return后返回值并停止执行
  • js的弱类型特点让函数不需要设置函数的返回值类型，不像C，Java那样需要设置类型，js直接使用return返回即可 ，可以是对象，也可以是函数，也就是说函数内可以声明函数

• 立即执行函数

  • 函数定义完立即被调用，立即执行函数只会执行一次

  • (function (a, b) {
        layer.msg("a=" + a);
        layer.msg("b=" + b);
    })(1,2)
    

• 方法

  • 对象的属性可以是函数，当对象的属性是函数时，就说这个函数是这个对象的方法

作用域

• 全局作用域
  • script中的js代码都在全局作用域
  • 全局作用域在页面打开时创建关闭时销毁
  • 在全局作用域中有一个全局对象window，可以直接使用
    • 全局作用域中创建的对象都会作为window对象的属性保存，创建的函数都会作为window对象的方法
  • 声明提前
    • 使用var关键字声明的变量会在程序开始执行时被声明，但只是声明，赋值操作在原来的位置
    • 使用函数声明形式创建的函数会在程序开始执行时被创建，所以该函数的调用可以在声明之前，但当使用函数表达式创建的函数，只会提前声明变量，并没有提前函数
• 函数作用域
  • 调用时创建函数作用域，执行完毕之后销毁，每调用一次函数都会有新的函数作用域，相互独立
  • 函数作用域内可以访问到全局变量，反之则不能
  • 在函数作用域中操作一个变量时，会先在自身作用域中寻找，如果没有再去寻找上一级作用域，直到找不到报错
  • 在函数作用域内想访问全局变量可以使用window对象
  • 函数作用域中同样适用声明提前的特性
  • 在函数作用域中没有使用var声明的变量，在创建该函数作用域后该变量会成为全局变量

DOM

• J是中通过DOM来对HTML文档进行操作

• Document Object Model——文档对象模型

  • Document 文档，在这里表示的就是整个HTML页面文档
  • Object 对象，将网页中的每一个部分都转换成了一个对象
  • Model 模型，使用模型表示对象之间的关系，方便获取对象，模型中，网页的每一个部分都是一个节点，标签叫元素节点，属性叫属性节点，文本叫文本节点，文档叫文档节点，节点的类型不同，属性和方法也不同
    

• 节点

  • 文档节点——整个HTML文档

  • 元素节点——HTML文档中的HTML标签

  • 属性节点——元素的属性

  • 文本节点——HTML中的文本内容
    

  • 节点的属性

    • 每个节点都有三个属性，分别时modeName，nodeType，nodeValue，具体各节点属性如下：
      

事件

• 用户和浏览器窗口发生的交互，例如点击事件，鼠标焦点移动，按下某键等
• 事件对象
  • 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递给函数，通过这个对象可以获取事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等
• 事件冒泡
  • 指事件的向上传导，当子节点事件被触发时，父节点的相同事件也会被触发
• 具体使用方法查js参考手册去

文档加载

• 浏览器加载页面时按照自上向下的顺序执行，如果将script标签写在boby前，那执行代码时页面还未加载
• onload事件在页面加载完之后才执行，这个属性通常绑定在window对象上
  • window.onload = function(){}

DOM查询

• 获取元素节点

  • getElementById()——通过id获取元素对象

  • getElementsByTagName()——获取标签名获取一组元素节点对象

  • getElementsByName()——通过name属性获取一组元素节点对象

  • 元素节点的子节点

    • getEmentsByTagName()——方法，返回当前节点的指定标签名后代节点
    • childNodes——属性，表示当前节点的所有子节点
    • firstChild——属性，当前节点的第一个子节点
    • lastChild——属性，当前节点的最后一个子节点

原型与原型链

每一个函数都有一个·prototype属性，默认指向一个Object空对象，也就是原型对象

var sum = function (num1, num2) {
    return num1 + num2;
}
var num = sum(3, 2);
console.log("num = "+num);//num = 5 
//函数的prototype属性默认指向一个空对象
console.log(typeof sum.prototype);//object 
//原型对象的constructor属性指向函数对象
console.log(typeof sum.prototype.constructor);//function 
console.log("constructor():" + sum.prototype.constructor(1, 3));//constructor():4

//给原型对象添加属性/方法后，该函数的所有实例对象都会拥有原型中的属性
Sum.prototype.test = function () {
    console.log("test(111)");
}
var sum = new Sum();
sum.test();

显式原型属性&隐式原型属性

• 每个函数都有一个prototype指向一个object空对象，即显式原型
• 每个实例对象都有一个_ _proto _ _指向寒素 ，可称之为隐式原型

var Sum = function (num1, num2) {
    return num1 + num2;
}
//显示原型,定义函数自动添加
console.log(Sum.prototype);
//隐式原型，创建对象自动添加
var sum = new Sum();
console.log(sum.__proto__);
//对象隐式原型的值是其对应的构造函数的显示原型的值
console.log(sum.__proto__ == Sum.prototype);//true

原型链

• 访问一个对象的属性时，先在自身属性中找，如果找到则返回，反之沿着隐式原型向上查找，找到则返回，如果最终没有找到，则返回undefined；

• fn.test1()——在Fn的实例对象中找到并返回

• fn.test2()——在Fn的实例对象中未找到，则按照原型链向上寻找，隐式原型指向Fn函数对象的显示原型对象，在原型对象中找到并返回test2();

• fn.toString()——按照原型链向上寻找，实例对象隐式原型指向其构造函数的显式原型，显示原型的隐式原型又指向Object的原型对象，找到toString并返回

• 因为是从隐式原型属性向上查找，所以原型链也被称之为隐式原型链，是用来查找对象的属性的