JS 文档加载事件 + this指向修改篇

js书写位置

• script标签 并不是只能写到body里面的最后面, 也可以写到head里或者其他位置
• 如果script标签里有操作当前文档dom的代码, 且这些代码可能先于html元素的代码执行. 此时, script标签要写到body里面的最后面; 除此之外的script标签可以放到其他地方

文档加载事件

1. load事件

   这是js提供的原生文档加载事件, 该事件会在整个文档加载完毕之后触发

   window.onload = function(){
   console.log(document.getElementById("div1"));
   }
   

2. ready事件

   这是jq提供的文档加载事件, 该事件也会等到文档加载完毕之后出发

   $(window).ready(function(){
       console.log(document.getElementById("div1"));
   });
   
   //简写
   
   $(function(){
       console.log(document.getElementById("div1"));
   });
   

3. load事件和ready事件的区别

   这两个事件都是文档加载完毕事件, 但是两个事件对于"加载完毕"的理解是不同的

   • load事件认为 , 文档里所有的html, css, 外联的js, 外部的资源(音频, 图片, 视频)等所有资源加载完毕, 才认为整个文档加载完毕
   • ready事件认为, 只要文档里的html结构加载完毕, 就认为整个文档加载完毕

this指向修改

• JS里, 因为this的指向会跟随方法的调用者的不同跟发生变化. 而有些时候, this默认的代指并不一定是我们想要的, 此时, 需要对this的指向做修改

• this代指的几种情况

  1. 直接调用全局函数(库函数, 自定义), this代指的都是window
  2. 绑定的事件里的this,代指的是触发该事件的元素或者对象
  3. 对象里函数的this,代指的是函数所属的对象

• call()方法

  语法：

  想要修改this指向的函数.call(参数1, 参数2, …);

  参数1: 想要把this改成的那个值

  参数2 , … : 函数所需要的实参

  注意: call方法在调用的时候, 会立刻调用被修改函数

  func1.call(document.body, "aaa", "bbb");
  

• apply()方法

  语法：

  想要修改this指向的函数.apply(参数1, 参数2);

  参数1: 想要把this改成的那个值

  参数2: 函数所需要的实参数组

  注意: apply方法在调用的时候, 会立刻调用被修改函数

  func1.apply(document.documentElement, ["hello", true]);
  

• bind()方法

语法：

想要修改this指向的函数.bind(参数1, 参数2, …);

参数1: 想要把this改成的那个值

参数2 , … : 函数所需要的实参

注意: bind方法在调用的时候, 并不会立刻调用被修改的函数, 而是把this已经修改后的函数以返回值形式返回给用户, 用户可以自己决定什么时候调用

var num = 666;
var newFunc1 = func1.bind(num, 111, 222);
setTimeout(function(){
    newFunc1();
}, 3000);

• 将来在修改this指向的时候, this尽可能修改成对象或者dom元素, 不要修改成其他原始数据类型. 如数字, 字符串, 布尔等.

• bind与call/apply的区别:

  1. bind在修改this时, 不会立刻调用被修改函数且有返回值
  2. call和apply在修改this时, 会立刻调用被修改函数
  3. call与apply的区别是参数, 第二个参数applay是数组, 而call是分开写的

JS 数据赋值的俩种情况

• js里，数据在赋值时的俩种情况

  1. 值传递
  2. 址传递

• 数据在传递的过程都是一个拷贝的过程

  var a = 10;
  var arr = [1,2,3]
  function fn1(num,array){
      
  }
  fn1(a,arr);
  
  num = a;
  array = arr;
  

  JS里, 除了object数据类型之外, 拷贝的都是值；只有object数据类型在赋值的过程中, 拷贝的是地址;