JS相关问题——部分转载

数据类型：

基本类型（值类型）：

字符串（String）、数字（Number）、布尔(Boolean)、空(Null)、未定义(Underfined)、Symbol.

引用数据类型（对象类型）：

对象（Object）、数组(Array)、函数(Function)、还有两个特殊对象：正则(RegExp)和日期(Date)

this关键字

this是在函数调用的时候绑定，不是在函数定义的时候绑定。它的上下文取决于函数调用时的各种条件，函数执行的时候会创建一个活动记录，这个记录里面包含了该函数中定义的参数和参数，包含函数在哪里被调用（调用栈）…,this就是其中的一个属性。

不同的使用：

方法中的 this

在对象方法中， this 指向调用它所在方法的对象。fullName 方法所属的对象就是 person。

单独使用this

单独使用 this，则它指向全局(Global)对象。
在浏览器中，window 就是该全局对象为 [object Window]:

严格模式下，如果单独使用，this 也是指向全局(Global)对象。、

函数中使用 this（默认）

在函数中，函数的所属者默认绑定到 this 上。
在浏览器中，window 就是该全局对象为 [object Window]:

函数中使用 this（严格模式）

事件中的 this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：

绑定事件：

默认绑定：

默认绑定的字面意思就是，不满足其他的绑定方式，而执行的绑定规则。默认绑定会把this绑定到全局对象。

function foo(){
     var num=2;
     this.num++
     console.log(this.num)
 }
 var num=0;
 foo()//1

在foo方法的代码块中操作的是window.num++。

隐式绑定:

函数被调用的位置有上下文，或者是该函数的引用地址是不是被某个对象的属性引用，并通过对象的属性直接运行该函数。如果出现上述的情况，就会触发this的隐式绑定，this就会被绑定成当前对象

function foo(){
    console.log(this.name)
}
var bar={
    name:'shiny',
    foo:foo
}
bar.foo()//shiny

不管你的对象嵌套多深，this只会绑定为直接引用该函数的地址属性的对象

function foo(){
    console.log(this.name)
}
var shiny={
    name:'shiny',
    foo:foo
}
var red={
    name:'red',
    obj:shiny
}
red.obj.foo()//shiny

隐式绑定的丢失：

function foo(){
    console.log(this.name)
}
var shiny={
    name:'shiny',
    foo:foo
}
function doFoo(fn){
    fn()
}
doFoo(shiny.foo)//undefind

当函数doFoo执行的时候会开辟一个新的栈并被推入到全局栈中执行，在执行的过程中会创建一个活动对象，这个活动对象会被赋值传入的参数以及在函数中定义的变量函数，在函数执行时用到的变量和函数直接从该活动对象上面取值使用。

显式绑定：

call、apply绑定
javascript,在Function的porpertype上提供了3个方法来强行修改this，分别是 call、apply、bind，大家经常用的莫过于call和apply了，这两个函数的第一个参数，都是需要执行函数绑定的this，对于apply只有连个参数，第二个参数是一个数组，这个数组是要传入执行函数的参数，而call可以跟很多参数，从第二个参数起都会被传入到要执行函数的参数中

function foo(){
   console.log(this.age)
}
var shiny={
   age:20
}
foo.call(shiny)//20

function bar(){
console.log(this.age)
}
var red={
age:18
}
bar.apply(red)//18

new绑定：

• 传统面向类的语言中的构函数，是在使用new操作符实例化类的时候，会调用类中的一些特殊方法（构造函数）
• 很多人认为js中的new操作符和传统面向类语言的构造函数是一样的，其实有很大的差别
• 从新认识一下js中的构造函数，js中的构造函数
  在被new操作符调用时，这个构造函数不属于每个类，也不会创造一个类，它就是一个函数，只是被new操作符调用。
• 使用new操作符调用 构造函数时会执行4步
  创建一个全新的对象
  对全新的对象的__proto__属性地址进行修改成构造函数的原型（prototype）的引用地址
  构造函数的this被绑定为这个全新的对象
  如果构造函数有返回值并且这个返回值是一个对象，则返回该对象，否则返回当前新对象

function Foo(a){
  this.a=a
}
var F = new Foo(2)
console.log(F.a)//2

绑定规则的顺序：

显式绑定优于隐式绑定，new绑定优于显式绑定
1 判断该函数是不是被new操作符调用，有的话 this就是 构造函数运行时创建的新对象 var f = new foo()
2 判断 函数是不是使用显式绑定 call、apply、bind，如果有，那么该函数的this就是 这个三个方法的第一个参数 foo.call(window)
3 判断该函数是不是被一个对象的属性引用了地址，该函数有上下文（隐式绑定），在函数执行的时候是通过该对象属性的引用触发，这个函数的this就是当前对象的。 obj.foo();
4 上面的三种都没有的话，就是默认绑定，该函数的this就是全局对象或undefined（严格模式下）

箭头函数：

链接: js 箭头函数详解_RayShyy的博客-CSDN博客_js箭头函数
es6 新增了使用胖箭头（=>）语法定义函数表达式的能力，很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数：
箭头函数并非使用 function 关键字进行定义，也不会使用上面所讲解的 this 四种标准规范，箭头函数会继承自外层函数调用的 this 绑定。
执行 fruit.call(apple) 时，箭头函数 this 已被绑定，无法再次被修改。

function fruit(){
  return () => {
    console.log(this.name);
  }
}
var apple = {
  name: '苹果'
}
var banana = {
  name: '香蕉'
}
var fruitCall = fruit.call(apple);
fruitCall.call(banana); // 苹果

underfined null

链接: JavaScript typeof, null, 和 undefined | 菜鸟教程 (runoob.com)

定时器 计时器

setTimeout()延迟定时器 （一次性定时器）

• 在指定的毫秒数后调用函数或计算表达式

setInterval()循环定时器（间隔器）（周期性定时器/计时器）

• 按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
  

清除定时器：

每次使用定时器，必须清除定时器
如何清除 每一个定时器开启后，都会返回一个对应的id 通过这个id就可以清除定时器

//在开启定时器的同时定义一个变量接受定时器返回的id，用于清除定时器
        var timer=setTimeout(function(){
            console.log(111);
        },1000)
        clearTimeout(timer);

        var timer2=setInterval(function(){
            console.log(111);
            clearInterval(timer2);
        },1000)

关于定时器函数的参数：

定时器可以接受多个参数

• 第一个是指执行的函数，必须传递，不传没有意义，会报错
• 第二个参数为定时器执行的毫秒数，可以不传
• 第三个之后的所有参数，都将是第一个参数函数执行的实参

//没有第二个参数会立即执行
        setTimeout(function(){
            console.log(111);
        })

        setTimeout(function(a,b){
            console.log(a,b);
        },1000,10,20)

关于定时器的第一个参数：

1、匿名函数

 setTimeout(function(){
            console.log(111);
        },1000)

2、有名函数

 setTimeout(function haha(){
            console.log(111);
        },10

3、有名函数的函数名

function haha(){
            console.log(111);
        }
        setTimeout(haha,1000)

JS放在head和body的区别

一，区别：

在head部分的JavaScript会被在调用的时候执行；
在body部分的JavaScript会在页面加载的时候被执行；

二，说明：

1. 浏览器解析html时是从上到下进行的
2. 放在head中的Js代码会在页面加载完成之前就读取，先被读取。而此时body中的html等还未被调用，则会被返回空值。
3. 如果想把放在body中的代码放在head中，可以对js代码进行改变，绑定监听，当全部的html文档解析完之后，执行代码;

window.onload=function(){
    //此处可放入js代码（如之前写好的放在body中的代码可直接放到此处）
}

4. 放在body中的Js代码，会在整个页面加载完成之后完成读取。
5. 如果想定义全局变量，这个对象是页面的某个按钮时，必须将其放入body中；因为放入head中，当你定义的时候 按钮未被加载，可能获得的是underfind.

三，放置位置

页面中的JavaScript会在浏览器加载页面的时候被立即执行，有时候我们想让一段脚本在页面加载的时候执行，而有时候我们想在用户触发一个事件的时候执行脚本。
1)head 部分中的脚本:
需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
为什么我们经常看到有很多的人把js脚本放到head里面没事呢？对！
就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。

在这里插入代码片<html>
<head>
  <script type=”text/javascript”>
  …
  </script>
</head>

2）body 部分中的脚本:
当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

<html>
<head>
  <script type=”text/javascript”>
  …
  </script>
</head>
<body>
  <script type=”text/javascript”>
  …
  </script>
</body>

4）外部脚本的使用
有时候你可能想在几个页面中运行同样的脚本程序， 而不需在各个页面中重复的写这些代码。这时你就要用到外部脚本。你可以把脚本写在一个外部文中，保存在扩展名为 .js的文件中。
注意:外部脚本文件中不要包含标记符

<html>
<head>
<script src=”xxx.js”></script>
</head>
<body>
</body>
</html>

四、多个onload不能放在js同一个位置

window.onload在一个html文件中写一次就好了，不能同时使用多个，否则后者会覆盖前者。
window.onload是页面加载完之后再加载这个onload的js
onload只能有一个，解决方案可以写到一个Onload里，
或ie下用window.attachEvent(“onload”, 你的onload方法)
非ie下用window.addEventListener(“load”, 你的onload方法)
把每个js里边的window.onload改成这样

if(window.attachEvent)
{
window.attachEvent("onload", 你的onload方法)

}
else
{
window.addEventListener("load", 你的onload方法)

}

• 当单个js文件时

window.onload=function(){
    funtion1(){};
    funtion2(){};
}

• 多个Js文件，并且之间还有关联的情况时，添加回调，

btn.onclick = func;

• 当添加多个回调时执行顺序不为这样，后面的会覆盖前面，

btn.addEventListener("click", func1, false);
btn.addEventListener("click", func2, false);
btn.addEventListener("click", func3, false);

执行顺序为func1->func2->func3。

在这里插入代码片attachEvent

为IE的方法

addEventListener

几种宽度、高度

• clientWidth:代表浏览器可视区的宽
  clientHeight:代表浏览器可视区的高
  
  浏览器可视区宽高变化时，clientWidth和clientHeight也跟着变化
  
• offsetWidth:获取物体自身的宽 offsetHeight：
  获取物体自身的高（如果有padding和border值，那么包含padding和border值）
  
  
• offsetLeft：获取的是相对于父对象的左边距 offsetTop ：获取的是相对于父对象的上边距
  
• scrollTop : 页面向上滚动的距离 scrollLeft ：页面向左滚动的距离 scrollWidth: 可滚动区域的宽度
  scrollHeight： 可滚动区域的高度 页面发生滚动时，此距离会一直变化
• event.clientX、event.clientY
  鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
• screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置； screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
  鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
• offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置 offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置
  鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
• event.pageX、event.pageY
  类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
  

数组：

W3C

简述web与w3c标准的认识

web可以简单分为：结构、表现、行为。三部分独立开来使其模块化
w3c是对web做出规范，使代码更严谨，做出来的网页更易使用，维护。
w3c做出的规范可分为如下：
结构上：
（标签规范对页面的搜索权重有很大关系，写的越规范网站在搜索排名越靠前）
标签闭合、标签小写、不乱嵌套
表现、行为上：
使用外链的css和js脚本，提高页面渲染效率。
少使用行内样式，类名要做到见名知意
什么是W3C

• 万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合
• 网页主要由三部分组成：
• 结构（Structure）
• 表现（Presentation）
• 行为（Behavior）
• 结构化标准语言主要包括XHTML和XML 表现标准语言主要包括CSS
• 行为标准主要包括对象模型（如W3C DOM）、ECMAScript

事件模型就是事件流的传播方向，当文档中出现一些特定的交互瞬间时，就会有事件流的出现。比如：当我们点击页面上的某个元素的时候，页面中不同层次的元素会按照一定的顺序接收到这个事件。
W3C中的事件模型，包括事件捕获和事件冒泡。事件捕获，是指最外层的文档对象先捕获得到事件流，接着是其子元素，一直到最具体的元素。事件冒泡，是指最具体的元素先获得事件流，接着，向父级元素流向，直至最完成的文档对象！
链接: 到底啥是w3c标准 - 清汤不加辣 - 博客园 (cnblogs.com)