JS基础细节知识

时间 2019-12-05

标签基础细节知识栏目 JavaScript 繁體版

原文原文链接

JS亦难亦简，基础就像给水修渠，基础打好，天然而然so ......！

1.全部的js代码都要写在script标签中

2.一个页面中能够放多个script标签

3.在js中把标签叫作元素

4.若是script使用src属性引入其余文件那么script中写的代码将失效

5.script标签不能够嵌套

6.js的引入方式：内嵌式外链式行内式

7.js的引入方式不分优先级，后面的会把前面的覆盖

8.在赋值操做中逻辑或

var a=1||2；//先验证1真假、为真给a赋值1
复制代码

9.在赋值操做中逻辑与

var a=1&&2; //先验证1真假、为真给a赋值二、为假给a
赋值1
复制代码

10.浏览器会实时监听集合，当集合数量发生改变时，获取的集合数量也会变化

<ul id="list">
    <li>88</li>
    <li>90</li>
    <li>78</li>
    <li>86</li>
    <li>92</li>
</ul>
<button id="btn">排序</button>
<script>
var oLis = document.getElementsByTagName("li");

btn.onclick= function () {
        var li = document.createElement("li");
        li.innerHTML=100;
        ul.appendChild(li);
        console.log(oLis);
    }
    // 输出6个li;浏览器会对li集合进行实时监听
    //当页面中li个数发生变化那么此集合也会随着发生改变
</script>
复制代码

11.函数能够在声明以前调用：

myFunction(5);

function myFunction(y) {
    return y * y;
}
复制代码

12.函数可做为一个值使用：

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3);
//x就等于函数运算的结果
//x=12；
复制代码

13.在 JavaScript 中使用 typeof 操做符判断函数类型将返回 "function"

14.JavaScript 函数描述为一个对象更加准确

15.JavaScript 函数有属性和方法

16.arguments.length 属性返回函数调用过程接收到的参数个数

function myFunction(a, b) {
    return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3) //2
复制代码

17.toString() 方法将函数做为一个字符串返回:

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString()
复制代码

18. 函数定义做为对象的属性，称之为对象方法函数若是用于建立新的对象，称之为对象的构造函数

19.经过arguments找到函数实参最大的值

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
复制代码

20.在JavaScript中，能够引用对象的值

21.所以咱们在函数内部修改对象的属性就会修改其初始的值

22.修改对象属性可做用于函数外部（全局变量）

23.修改对象属性在函数外是可见的

24.函数做为全局对象调用，会使 this 的值成为全局对象。使用 window 对象做为一个变量容易形成程序崩溃

25. 函数做为对象方法调用，会使得 this 的值成为对象自己

26.若是函数调用前使用了 new 关键字, 则是调用了构造函数

27.构造函数的调用会建立一个新的对象。新对象会继承构造函数的属性和方法

28.构造函数中 this 关键字没有任何的值。this 的值在函数调用实例化对象(new object)时建立

29.做为函数方法调用函数时，此函数执行了至关于 java 中静态函数的功能

<script>
var myObject, myArray;
myObject={
    name: "hahaha ",
    hsk: "en"
};
function myFunction(a, b) {
    alert(this);
    return this.name +this.hsk;
}
myArray = [10, 2]
myObject = myFunction.apply(myObject, myArray)
复制代码

30. 变量声明时若是不使用 var 关键字，那么它就是一个全局变量，即使它在函数内定义

31. 闭包是可访问上一层函数做用域里变量的函数，即使上一层函数已经关闭

32.类数组转数组

//类数组转数组
 function sum(){
    var ary=[].slice.call(arguments);
 }
 sum(1,2,33,88,56,88,92)
 console.log(ary);
复制代码

33.js异常捕获

try catchhtml

try{
    console.log(a);
  }catch(w){
    w是一个对象
    console.log(w.message);//w是错误信息
    throw new Error(w.message);//抛出异常信息；此行代码下面都不运行
    console.log(200);
    console.log(100);
}
复制代码

34.字符串不能经过索引来改变字符中的某一项，要改变只能从新赋值

var myStr = "Bob";
myStr[0]="j"



var myStr = "Bob";
myStr = "Job";
复制代码

35.获取字符串的最后一项

var sTr="wdaefaegg";
var s=sTr[sTr.length-1]
复制代码

36.typeof/instanceof/constructor/Object.prototype.toString.call(实例)

typeof只能监测基本数据类型和function

instanceof 检测某个实例是否属于这个类，是返回true/不是返回false
用字面量建立的基本数据类型的值检测不了

只要类在实例的原型链上都返回true

constructor 原型上的一个属性，指向原型上所属的类

实例.constructor===类

Object.prototype.toString.call
全部数据类型均可以检测
复制代码

37.用行间属性存储当前img标签的真实图片的路径

38.let：声明的变量不进行变量提高

代码执行以前进行变量声明，可是不进行提高java

变量名不能重名数组

39.jQuery的事件不须要on，把方法直接传给事件的回调函数;

40.document.getElementById(“id名”) 在IE六、7中会把表单元素的name当作ID值获取到

41.变量提高IE10及如下，function声明的函数，即声明又定义

42.在touchend的事件中，不存在e.touches这个属性；会把触摸信息存储到changedTouches中

{key:value,key1:value1…}以一个花括号包裹，多个键值对之间用","隔开，没有顺序

获取对象属性：

一、obj.属性名浏览器

二、obj[“属性名”]bash

替换对象属性

一、obj.已有属性名=值闭包

二、obj[“已有属性名”]=值app

新增对象属性

一、obj.新增属性名=值函数

二、obj[“新增属性名”]=值ui

删除对象属性

一、delete obj.属性名this

二、delete obj[“属性名”]

1.正则

var reg=/abc/g; //字面量建立正则

//构造函数建立正则  （"正则的主题","修饰符"）
var reg1=new RegExp("abc","g");

var str="abcDABCD"

str.replace(/cd/ig, "-");

//正则修饰符能够叠加到一块写
复制代码

undefined：

一、若是变量只声明，没有赋值，那么默认存储的值就是undefined

var c;

console.log(c);


二、若是获取对象的属性名对应的属性值，若是属性值名不存在，获取的值是undefined

三、若是函数的形参没有对应的实参，那么形参默认储存值是undefined

四、若是函数没有return，那么默认值的返回值也是undefined
复制代码

四、null空值（如今没有，之后可能会有）

返回值为null的状况：

一、经过Id获取元素的时候，获取不到返回null

二、销毁对象时，给他赋值为null

三、正则捕获对象时(reg.exec())，没有捕获到内容，返回null

若是想把字符串变成数字直接后面加上0

若是想把数字变成字符串直接后面加上空字符串

比较规律

NaN 和本身都不相等

对象 == 布尔

对象先转字符串，再转数字，布尔转数字

对象 == 对象

比较的是空间地址

对象 == 数字

对象先转字符串，再转数字

对象 == 字符串

对象转字符串，字符串比较

布尔 == 字符串

布尔转数字，字符串转数字

布尔 == 数字

布尔转数字

字符串 == 数字

字符串转数字

变量提高

造成全局做用域---> 变量提高（var、function）--> 代码从上到下执行

无论条件是否成立，都要进行变量提高

在最新版本的浏览器中，对function函数，只声明不定义

在旧版本浏览器中，带function的不只声明，还要定义

in : 检测属性名是否属于这个对象；若是属于返回true，不属于返回false

变量提高只发生等号的左边

return下面的代码须要进行变量提高；可是return后面的代码不进行变量提高

return : 1. 返回值 2. 停止代码再也不向下运行

若是变量重复，不须要从新声明，可是要从新定义

匿名函数不须要进行变量提高

做用域链

当获取变量对应值时，若是当前做用域不存在，须要向上一级做用域查找

函数的上一级做用域跟函数在哪执行没有关系==跟函数在哪定义有关，函数在哪一个做用域下定义，上一级做用域就是谁全部做为值类型的都是数据类型中的一种

在JS中只要遇到报错，代码当即中止，再也不向下执行

私有做用域中带war的是私有变量、不带war的不是私有变量它会向上级做用域查找

在做用域链查找的过程当中、若是找到win也没有这个变量、至关于给win设置属性

function fn(){
    b=13;
    console.log(b);
}
fn();
console.log(b);
复制代码

在js变量提高代码运行时、当条件成立、进入判断体中（在ES6中、它是一个块级做用域）、先把fn声明和定义了、也就是判断体中代码执行以前、fn就赋值了、

在块级做用域下、带war的和function的不能够重名

函数有形参没实参始终是undefined

this

指js中有特定意义的关键字

一、全局做用域下的this指向window、和window是同一个空间地址

console.log(this);
console.log(window);
this.a=1
复制代码

二、若是给元素的事件行为绑定函数、那么函数中的this指向当前被绑定的那个元素

oBox.onclick=function(){
    console.log(this);//this---oBox}
复制代码

三、函数中的this、要看函数执行前有没有“.”、有的状况下this就指向谁、没有就指向window

四、自执行函数中的this永远指向window

五、定时器中函数的this指向window

六、构造函数中的this指向当前的实例

七、call、apply、bind能够改变函数中this的指向

let

在js中let不存在变量提高、let执行时会造成私有做用域

let在相同做用域中、let不能声明相同名字变量、有重名直接报错

无论什么方式在当前做用域下声明了变量==、再次==使用let建立都会报错

暂时性死区

在原有浏览器渲染机制下、基于typeof等逻辑运算符检测一个未被声明的变量、不会报错、返回undefined

若是当前变量是基于ES6语法处理、在没有声明这个变量时、使用typeof检测则直接报错、不是undefined、这样解决了暂时性死区

new：操做符：在函数执行前加new

1.函数执行前造成一个私有做用域、代码执行以前默认建立空的对象

2.而且改变了当前做用域下的this指向、让其指向那个空对象

3.当代码运行完、把这个对象返回

普通函数和构造函数

"."的优先级大于new这个操做符

括号的优先级高于"."

经过new这种方式建立一个数组

var f=new Array(12,12)

console.log(f); 

//若是只有一个参数，表明数组的长度
// 不是一个参数就表明数组成员的每一项
复制代码

严格模式

在严格模式下arguments和形参没有映射机制

在严格模式下不容许给一个对象设置重复属性名的

obj={n:10,n:20}
复制代码

在严格模式下、函数执行、若是没有明确指定执行的主体（函数前面没有点）再也不像非严格模式下、统一交给window、而是让this指向undefined、表明没有执行主体

严格模式下、有执行主体this就指向谁、没有执行主体、this就是undefined

详见高程三严格模式和非严格模式的汇总

构造函数

构造函数中的this永远指向当前的实例

经过this给实例新增的属性都是私有属性

2.若是没有参数，能够省略小括号；

3.若是return一个基本数据类型的值，不会覆盖默认返回的那个对象，若是return引用的类型，会将默认的那个覆盖掉；

4.instanceof ：检测实例是否属于某个类；

实例必定是一个对象

5.hasOwnProperty:检测当前属性是不是私有属性，若是是返回true，不是返回false

console.log(d.hasOwnProperty("a"));//true
    console.log(d.hasOwnProperty("toString"));//false
    console.log(d.hasOwnProperty("c"));// false
复制代码

封装检测是否数据类型属于私有属性仍是公有属性

function hasPublicProperty(obj,attr) {
return attr in obj && !obj.hasOwnProperty(attr)?true:false;}
复制代码

原型

原型指向能够被改变的

实例对象的原型proto指向的是该对象所在的构造函数的原型对象

构造函数的原型对象(prototype)指向若是改变了，实例对象的原型(proto)指向也会发生改变

实例对象和原型对象之间的关系是经过proto 原型来联系起来的，这个关系就是原型链

若是原型指向改变了，那么就应该再原型改变指向以后添加原型方法

原型扩展

若是扩展的属性名和内置的属性名相同时，会把原有的会覆盖

原型继承

prototype 实现继承

利用prototype，将Student 的prototype 指向 Person 来达到继承效果

优势：继承了父级原型上的方法

缺点:实例化多个Student 都必须共用相同的name 和 age

Student.prototype.constructor=Student

注意:使用原型继承时，须要将构造器的指向更改回正确的指向

function Person(name,age){
        this.name=name;
        this.age=age;
     }
 
     Person.prototype.eat=function(){
        console.log("Person 吃饭")
     }
 
     function Student(num,score){
        this.num=num
        this.score=score
     }
     //继承
    Student.prototype=new Person("小红",10)
    Student.prototype.constructor=Student
 
    var stu =new Student(2016002288,80)
    stu.eat()//Person 吃饭
复制代码

组合继承

function Person(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
     }
     Person.prototype.sayHi=function(){
        console.log("你好")
     }
 
     function  Student(name,age,sex,score){
        //借用构造函数
        Person.call(this,name,age,sex)
        this.score=score
     }
 
     // 改变了原型指向
     Student.prototype=new Person();//不传值
     Student.prototype.eat=function(){
        console.log("吃东西");
     }
 
     var stu=new Student("小黑",20,"男","100分")
     console.log(stu.name,stu.age,stu.sex,stu.score);
     stu.sayHi()//你好
     stu.eat()//吃东西
复制代码

call

在严格模式下，若是不传或传undefined，那么this就是undefined 传null 就是null

apply

只能接收最多两个参数和call不一样的是传参不一样

bind

bind 方法的返回值就是改变this以后的fn

call apply bind

都是改变this的指向

call apply 当即执行函数

bind 不当即执行函数预处理函数中的this

分享一波专属表情包戳我！