发表于

JSON:就是一种数据格式

  • JSON格式：属性名字用双引号包含，属性值如果是字符串也用双引号包含；

    1
    2
    3
    4
    5
    6
    var obj = {
        name: 'zf'
    };
    var jsonObj = {
        "name": "zf"
    }

  • JSON.parse:将json格式的字符串转换为对象；(改变传入的参数) /eval

  • JSON.stringify:把json格式的对象转化成一个json格式的字符串；(改变传入的参数)

    JSON在ie7-不兼容

    1
    2
    3
    4
    5
    6
    7
    8
    function jsonParse(jsonStr){ //将JSON字符串转换为对象的兼容性写法
       /*    if (window.JSON){
        return JSON.parse(jsonStr);
        }else{
        return eval("("+jsonStr+")")
        }*/
       return window.JSON?JSON.parse(jsonStr): eval("("+jsonStr+")");
       }

in操作符：判断一个属性是否属于一个对象 -》返回一个boolean值

  • ps：共有属性如果能调用也是真：判断属性名字，该属性名字要用字符串

    ajax

  1. new XMLHttpRequest() –>request 请求
  2. xhr.open(get/post,url,true/false)
    • get/post:请求方式
    • url:接口(后台提供)
    • true/false 异步/同步
  3. xhr.onreadystatechange = function 当readystate(就绪状态)改变触发
    • xhr.readyState == 4 代表xhr回来了 –>
    • xhr.status == 200 代表成功获取到数据 –>status n.情形
    • xhr.responseText 属性存放获取回来的数据 –>response 响应
  4. xhr.send(null) 发出

window.navigator.userAgent;

  1. 如何判断当前的浏览器是不是ie8
    判断浏览器和版本
    indexOf(‘’)

发表于

DOM映射

  • 页面中的元素通过DOM方法来获取回来的集合，这个集合任然和页面中的元素存在这种一一对应的关系就是DOM映射,并且及时这个元素暂时不存在那么这变量lis集合任然会随着页面内li的增加而增加，减少而减少
  • dom回流：只要页面中的元素发生了位置上的改变（增加，删除）都会引起dom回流。
  • dom重绘：一般就是元素样式的改变会引起重绘。

    动态创建和innerHTMl

  • 动态创建的范式不会影响原有元素的任何属性，但操作不便还有可能引起多次回流；
    1
    2
    3
    4
    5
    6
    //1. 在页面中原有的基础上再增加4个；-->不会破坏原有元素的属性
    for (i = 5; i < 9; i++) {
        var li = document.createElement("li");
        li.innerHTML += i;
        list.appendChild(li);
    }
1
2
3
4
5
var frg = document.createDocumentFragment(); //创建一个文档碎片
  for(i = 0;i< a.length;i++){
      frg.appendChild(a[i]); //循环吧已经排序好的这些li重新添加到页面中 =-》页面中多了元素还是调换了位置
  }
   list.appendChild(frg); //将包含所有li的文档碎片，放到list里面；
  • innerHTML的范式：

排序li的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,ul,li{
            margin:0;
            padding: 0;
            list-style: none;
        }
        #list{
            margin: 100px auto;
            width: 500px;
            border:3px solid blue;
            text-align: center;
            line-height: 30px;
        }
        #list li{
            height:30px;
            background: lime;
            margin:1px 0;
        }
    </style>
</head>
<body>
<ul id="list">
    <li>1</li>
    <li>3</li>
    <li>2</li>
    <li>4</li>
</ul>
<script src="../../utils.js"></script>
<script>
     var list = document.getElementById("list");
     var lis = list.getElementsByTagName("li");
     //通过dom方法获取回来的集合；
//     console.log(u)
     var a =utils.toArray(lis); //把数组排序
    console.log(lis);  //数组集合 --》 依然和页面内的li元素存在这种一一对应的关系
    for(var i = 0;i< lis.length;i++){
        lis[i].onmouseover = function () {
            this.style.background = "red";
        };
        lis[i].onmouseout = function () {
            this.style.background = "lime";
        };
    }
     a.sort(function(a,b){
         return a.innerHTML-b.innerHTML;
     });
     var frg = document.createDocumentFragment(); //创建一个文档碎片
    for(i = 0;i< a.length;i++){
        frg.appendChild(a[i]); //循环吧已经排序好的这些li重新添加到页面中 =-》页面中多了元素还是调换了位置
    }
     list.appendChild(frg); //将包含所有li的文档碎片，放到list里面；
     //在页面中原有的基础上再增加4个；-->不会破坏原有元素的属性
     for (i = 5; i < 9; i++) {
         var li = document.createElement("li");
         li.innerHTML += i;
         list.appendChild(li);
     }
     //innerHTML的方式
     //会破坏原有元素的属性
/*     var str = "";
     for(i = 9 ;i<=10;i++){
         str = "<li>"+i+"</li>";
         list.innerHTML+=str;
     }
     */
     frg = null;//释放内存
    //经过验证就是把原有元素重新调换位置 --》哪些增加的属性依然还在
    //说明使用appendChild(动态添加)的方式不会影响元素的任何属性，曾经绑定过的事件现在还存在
</script>
</body>
</html>

发表于

JS变量

JS变量

JS数组

JS数组

JS运算符

JS运算符

dom基本操作

JS dom基本操作

window对象

window对象

函数基础

函数基础

流程语句

流程语句

正则表达式

正则表达式

字符串函数

字符串函数

发表于

call、apply、blind：

  1. 定义的位置：Function.prototype 函数类的原型上,相对于每个Function的实例来说都是公有方法。

call

  1. 执行步骤：
    1. 通过一个Function类的实例来先找到定义在Function.prototype的call
    2. call方法把这个函数实例中的this修改成了call的第一个参数；(ps：call从第二个参数开始都是传给调用call的函数实例的)
    3. 函数实例执行（ps:用call的时候，带执行效果）
  2. 事件中的this修改：
    • 严格模式和非严格模式区别：（”use strict” 严格模式，放在script标签下的第一行）
      1. 使用call的时刻，如果把this修改成null或者undefined时，在非严格模式下会默认this为window
      2. 自运行函数的this和函数执行前没有”.”，在严格模式下this都是undefined
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
            div1.onclick = function () {
                fn.call(document.body);
            };
            function fn() {
                this; //-->body;
            }
        ////////////////////////////////////////////
            function sum(num1,num2) {
                this;
                return num1+num2;
            }
            sum.call(undefined,100,200); //-->在非严格模式下：undefined/null/等，会自动默认this值

apply

  1. 和call的方法的作用基本相同，apply的第二个参数是一个数组，会把数组中的每一项作为调用apply方法的函数实例的参数。(和call一样，都是在修改完this之后直接把函数执行了)

    1
    2
    3
    4
    function sum(a, b) {
        console.log(a + b);
    }
    sum.apply(null, [100, 200])

  2. 取数组中的最大值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     Math.max.apply(null,ary);//将数组中的每一项作为参数的时候
    ////////////////////////////////////////////
     var ary = [1,2,3];
     console.log(eval("Math.max(" + ary.join() + ")"));
    /////////////////////////////////////////////////////////////
    //用架设的方法 ——》|
      var max = ary[0];
         for (var i = 1; i < ary.length; i++) {
             if (ary[i] > max) {
                 max = ary[i];
             }
         } //循环结束后，max为ary的最大值

blind: 不兼容

  • call和apply都已经把函数执行结束，.blind()会返回一个在fn的基础上修改了this的新函数。使用bind的时候，只是修改this，返回值执行的时候再传参，不兼容。

    consider

  • fn1.call.call.call(fn2):多个call的时候，其实就是第一个参数执行;

    Object.prototype.toString.call();

  • 相当于call把toString中的this修改成了数组，而原型上方法中的this一般是实例，已经把this更改成了这个数组。那么toString就被数组偷偷的调用了一次。
  • Object原型上的toString方法打印”[object Object]”这样的字符串。后半部分就是标记当前实例所属于的类;
  • 判断当前数据是不是{}的对象？？ –》 “[object Object]”

    for in

  • hasOwnProperty
  • propertyIsEnumerable检查是否为可枚举属性

    sort

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
       ary.sort(function (a, b) {
            //a，b分别就是数组中要比较的相邻两项
            return a - b; //return的这个a-b的差就是是否交换位置的依据:若果为整数，则交换位置;mx
    //    return a.age - b.age; 按对象中的某个属性（数字）排序
            // return a.name.localeCompare(b.name); 字符串排序
            //"a".localeCompare("b")    --》 -1 不变
            //"a".localeCompare("a")  --》0 不变
            //"a".localeCompare("b") --》1 倒排
        })

try

1
2
3
4
5
try{
    先尝试执行这里的代码，如果报错那么执行catch内的代码；
}catch(e){
    e是一个对象，e.message属性保存着报错的信息；
}

发表于
  1. typeof 操作符
    • typeof检测引用数据类型时返回 object；
    • typeof 函数的时候返回function
    • typeof 基本数据类型的时候返回
      • number
      • string
      • boolean
      • 检测 null的时候返回的是object，因为null代表的是一个空对象指针，返回object在逻辑上更便于理解(高程三)
      • undefined
  2. obj instanceof class 运算符:
    • 用来检测对象是不是某类的一个实例，返回值是true或者是false

  3. obj.constructor

    a(c){
    1
    2
    3
    4
    5
    6
    7
    8
        this.b = c;
        this.d =function(){
            alert(this.b);
        }
    }
    var obj = new a('test');
    alert(typeof obj.prototype);//undefine
    alert(typeof a.prototype);//object

  4. prototype

    • new 运算符做了哪些事情
      1. var obj = {};也就是说，初始化一个对象obj；obj被Object初始化
      2. obj.proto = a.prototype : 指向构造函数的prototype属性
      3. a.call(obj);也就是会所构造obj，也可以称之为初始化obj;
    • 原型链的概念：每个对象都会在其内部初始化一个属性，就是proto，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去proto里找这个属性，这个proto又会有自己的proto，于是就这样一直找下去。
      （来源:博客文章-深入分析js中的constructor和prototype）
    • a.prototype包含了两个属性
      • constructor:当前类的构造函数a
      • proto

发表于

单例模式

  • 单例模式：其实就是一个对象，解决命名冲突的问题，模块化方便代码管理，常用
    • 命名空间 - > nameSpace
    • ps：单例模式下每个属性和属性之间的调用使用this就可以，比如：
      1
      2
      3
      4
      5
      6
      7
      8
      var obj = { //obj即为命名空间
          fn:function(){
          },
          fn1:function(){
              this.fn(); // 直接用this.就可以调用obj内的其它函数
          }
      }

构造函数(类)

  1. 内置类

  2. 实例：具体到这个类中的某一个。每一个实例都是一个对象

    1
    2
    var ary  = new Date;
    console.log(typeof ary); --> "Object"
    • 每一个数组都是Array这个类的一个实例
    • 每一哥函数都是Function这个类的一个实例
  3. instanceof 专门判断一个实例是否属于一个类的操作符，返回一个boolean值
  4. 任何一个引用数据类型都是Object这个类的实例

  5. 如何定义一个类：

    • 类名尽量使用首字母大写；
    • 构造函数总的this就是当前实例 -> 如果想在实例刚添加私有属性 this.propertyName
    • 构造函数会默认返回实例，如果return一个引用数据类型会将构造函数的默认返回值破坏掉；
      1
      2
      3
      4
      5
      6
      function Tab(value){//1.普通函数 2.构造函数（类） 3.Function这个类的一个实例
           var a = 100; //这个私有变量不会对实例产生任何影响
           this.key = value; //给实例创建一条属性
      }
       Tab(); //将Tab当成普通函数执行
       var tab1 = new Tab() //将Tab当成类来使用

  6. new运算符做了哪些事情的简单分析

发表于

一、this和预解释

1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var num = 5;//6 7
var obj = {
    num : 4, //5
    fn : (function (num){
        num++;
        this.num++; //只执行函数的this是window
        var num=2;   // 3 4 不会有第二次声明
        return function (){
            num++;
            this.num++;
            console.log(num);  //3 4
}
    })()
};
var fn = obj.fn; // fn与obj.fn指向同一个函数，但是同一个函数中this会产生差异
fn(); //3     其中的this指的是 window
obj.fn(); //4 与fn指向同一个未被释放的栈内存，不同的只是this
console.log(this.num,obj.num); //7 5

  1. arguments[0] –> 理解为于arguments.0

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var len  = 5;
    var fn = function(){
        console.log(this.len);
        console.log(this)
    };
    var main  = {
        fn :function(fn){
            fn(); //fn是获取的就是全局fn函数。那么在这里执行fn函数中dethis是window，打印的就是window.len --》5
            arguments[0]();// arguments.0   ，这个函数里面的this是arguments -> undefined
        },
        len:10
    };
    main.fn(fn);

  2. 预解释 + 实例化 + js运算符优先级

    • js优先级汇总表
      -

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      function Foo() {
          getName = function () { alert (1); };
          return this;
      }
      Foo.getName = function () { alert (2);};
      Foo.prototype.getName = function () { alert (3);};
      var getName = function () { alert (4);};
      function getName() { alert (5);}
      //请写出以下输出结果：
      Foo.getName();
      getName();
      Foo().getName();
      getName();
      new Foo.getName();
      new Foo().getName();
      new new Foo().getName();

    • 答案详解

  3. 封装一个函数：把一个类数组转化成一个数组：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function toArray(a){
        try{
            //把slice中的this改为a，就变为了克隆a，并返回了；在ie8-都是不兼容的
            Array.prototype.slice.call(a);
        }catch(e){ //e是一个对象，e.message储存着try中的报错内容
            var ary = [];
            for(var i;i<a.length;i++){
            a[i]=ary[i];
            }
            return ary;
            }
    }

发表于

关于this总结,函数中this的用法

  1. 绑定事件函数中的this就是绑定的那个元素 = 》 时间绑定给谁this就是谁
  2. 函数执行时候函数中的this就是调用这个函数的宿主 = 》
    当函数被调用的时候，看前面是否有点，点前面是谁，this就是谁；PS:
    • 只要有函数包含this那么this就一定发生了改变
    • 只有函数执行的那一才能确定函数中的this
    • 执行方式不同会导致同一个函数中的this不同;
  3. 自执行函数中的this，永远都是window；(非严格模式下),
  4. 定时器中函数执行中的this，一般是window
  5. 在构造函数模式中，类(函数体中)出现的this.xxx=xxx中的this是当前类的一个实例
  6. call 和 apply&bind都可以强制修改this
  7. 回调函数中的this一般也是window
1
2
3
4
5
6
7
8
9
10
function fn(){
    console.log(this); //只有执行的时候才能判断this指向
}
var obj={
foo:function foo(){
    console.log(this); // obj
    fn(); //window
}
}
obj.foo()

发表于

字面量：含义

  1. 这些字符字面量可以穿线在字符串中的任意位置，而且也将被作为一个字符来解析
    • \n 换行
    • \t 制表
    • \b 空格
    • \r 回车
    • \f 走纸换页
    • \ 斜杠
    • \’ 单引号：在单引号表示字符串中使用
    • \” 双引号：在双引号表示的字符串中使用
      2.
    •   空格