王羽彪 | 学习前端


  • 首页

  • 归档

  • 标签

JSON

发表于 2017-03-01

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映射

发表于 2017-03-01

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>

知识属性图整合

发表于 2017-02-28

JS变量

JS变量

JS数组

JS数组

JS运算符

JS运算符

dom基本操作

JS dom基本操作

window对象

window对象

函数基础

函数基础

流程语句

流程语句

正则表达式

正则表达式

字符串函数

字符串函数

call apply blind

发表于 2017-02-28

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属性保存着报错的信息;
}

运算符优先级

发表于 2017-02-25

关于数据检测

发表于 2017-02-25
  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

面向对象

发表于 2017-02-23

单例模式

  • 单例模式:其实就是一个对象,解决命名冲突的问题,模块化方便代码管理,常用
    • 命名空间 - > 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运算符做了哪些事情的简单分析

练习题

发表于 2017-02-23

一、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

发表于 2017-02-23

关于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()

字符字面量

发表于 2017-02-22

字面量:含义

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

王羽彪

技术 | javascript | html | 前端学习

47 日志
77 标签
© 2017 王羽彪
由 Hexo 强力驱动
主题 - NexT.Pisces