再啃 javascript 高级程序

时间  2019-11-09
标签 javascript 高级 程序 栏目 JavaScript 繁體版
原文   原文链接

第二章：

一、为了不页面出现延迟时的空白，把js放在body元素中页面内容的后面。

二、延迟脚步的方法：

（1）defer
（2）async
（3）动态建立<script>标签
（4）ajax前端

三、引入外部文件的优势：

（1）增长可维护性
（2）可缓存，加快页面加载速度
（3）适应将来ajax

第三章：基本概念

一、js中一块儿都区分大小写。

二、标示符（变量，函数，属性）的规则：

（1）第一个字母必须是一个字母，下划线，或者一个美圆符号
（2）其余字符能够是字母，下划线，美圆符号，或者数组json

三、严格模式的定义和做用。

定义：它定义了一种不一样的解析和执行模型。
做用：
（1）不肯定的行为将获得处理
（2）对某些不安全的操做会抛出错误跨域

四、建议语句结尾的分号要加上。

五、使用代码块让编码意图更加清晰，下降修改代码时出错的概率。

六、变量的要注意的问题：用var操做符定义的变量将成为定义改变量的做用域中的局部变量。（也就是说，若是在函数中使用var定义了一个变量，那么这个变量在函数退出后就会被销毁）

七、数据类型：undifined boolean string number object function

八、undefined出现的缘由：

（1）被来就没有定义

（2）定义了可是未赋值

九、number使用的是IEEE745格式来表示整数和小数，因此会出现，0.2+0.1不是0.3的问题。

十、NAN是一个特殊的数字类型的数值

十一、强制类型转换：（1）Number （2）parseInt（3）parseFloat 隐式类型转换：== !!

十二、null和undefined 没有toSting方法，因此就会放回这个两个值的字面量 null 和undefined

1三、对象是一组数据和功能的集合，每一个实例都具备属性和方法

（1）constructo：保存用于建立当前对象的函数

（2）hasOwnProperty：检查给定的属性在当前对象实例中是否存在。

（3）isPrototypeOf：检查传人的对象是否传人对象的原型。

（4）toLocalString：

（5）toString：返回对象的字符串

（6）valueOf：返回对象的字符串，数值，布尔值

1四、break 终止循环,continue 跳过当前循环，继续执行下个循环 ###数组

第四章 变量、做用域、内存

一、基本类型（undefine null boolean number string）是按值访问，引用类型是按对象的引用访问

二、一个变量向另外一个变量复制基本类型的值，会在变量上建立一个新值，而后把改值复制到为新变量分配的位置上。（复制）

三、当一个变量向另外一个变量复制引用类型的值时，会将储存在变量对象中的值复制一份放到为变量分配的空间中，可是这个值的副本是一个指针，而这个指针指向储存在堆中的一个对象（快捷方式）

四、全部的函数参数都是按值传递的

五、执行环境定义了变量或函数有权访问其余数据，决定了他们各自的行为。

六、内部环境能够经过做用域链访问全部的外部环境，但外部环境不能访问内部环境中的任何变量和函数。

七、查询标示符的过程：搜索过程从做用域的前端开始，向上足部查询与给定名字匹配的标识服。若是在局部环境中找到了改标示符，搜索过程中止，变量就绪。若是在局部环境中没有找到该变量名，则继续沿着做用域向上搜索。搜索过程将一直追溯到全局变量的变量对象。若是在全局环境中也没有找到这个标示符，则该变量未声明。

第五章 引用类型

一、可使用点操做属性，也能够用方括号操做。可是方括号的优势是能够经过变量来访问属性，若是使用了关键字活保留字也能够用方括号

二、数组经常使用的方法：

（1）Push()尾部添加

（2）pop()尾部删除

（3）Unshift()头部添加

（4）shift()头部删除

（5）concat()链接

（6）join() 拆分

（7）sort() 排序

（8）reverse() 倒序

（9）splice() 混合（删除，插入，替换）

（10）indexOf() 查找索引位置

三、解析器在向执行环境中加载数据时，挤下去会率先读取函数声明，并使其在执行任何代码以前能够访问（函数声明提高）；可是函数表达式必须等到解析器执行到它所在的代码行，才会真正的被解析。

四、call和apply 设置函数体内的this指向。call接受的字符串，apply接受的是数组

5.字符串经常使用方法：

（1）charAt() 访问特定字符

（2）concat() 拼接

（3）substring 截取

（4）indexOf() 查找索引

（5）splice() 混合法（向数组中添加/删除项目）

（6）toLowerCase()

（7）toUpperCase()

第六章 面向对象

建立对象的方法：

1； 工厂模式

fuction person(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
            alert(this.name)
        }
        return o;
    }
    var p1 = person()

2；构造函数模式

function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function() {
            alert(this.name)
        }
    }
    p1 = new Person()

和工厂方式的区别：
（1） 没有显式的建立对象；
（2）直接将属性和方法赋给你了this对象；
（3）没有reutrn 语句
建立实例的步骤：
（1）建立一个对象；
（2）讲构造函数的做用域赋给新对象；
（3）执行构造函数中的代码；
（4）返回新对象浏览器

3；原型模式

function Person() {};
    Person.prototype = {
        constructor: Person;
        nage = "bug";
        age: 19;
        job: "coder";
        sayName: function() {
            alert(this.name)
        }
    }
    var p1 = new Person()

原型模式的缺点：
（1）相同的属性值；
（2）实例被共享缓存

4；组合模式

funcition Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends: ['a', 'b'];
    }
    Person.prototype.sayName = function() {
        alert(this.name)
    }
    
    var p1=new Person()

5；动态原型模式

function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        if (typeof this.sayName != "function") {
            Person.prototype.sayName = function() {
                alert(this.name)
            }
        }
    }
    var p1 = new Person()

6；寄生构造函数模式

funcition Person(name,age,job){
        var o=new Object();
        o.name=name;
        o.age=age;
        o.job=job;
        o.sayName=function(){
            alert(this.name
        }
        return o;
    }
    var p1= new Person()

7；稳妥构造函数模式

function Person(name, age, job) {
        var o = new Object();
        o.sayName = function() {
            alert(name)
        }
        return o;
    }
    var p = Person()

对象的继承方式：

1；原型链继承

function SuperType() {
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function() {
        return this.property;
    }
    
    function subType() {
        this.subproperty = false;
    }
    SubType.prototype = new SuperType();
    
    SubType.prototype.getsubValue = function() {
        return this.subproperty;
    }
    
    var instance = new subType();

2；借用构造函数

function SuperType() {
        this.colors = ["red", "blue", "green"];
    }
    
    function SubType() {
        SuperType.call(this)
    }
    var instance1 = new subType();

3；组合继承

function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function() {
        alert(this.name)
    }
    
    function SubType(name, age) {
        SuperTyep.call(this, name)
        this.age = age;
    }
    SubType.prototype = new SuperType();
    SubType.prototype = construtor = SubType;
    subTpye.prototype.sayAge = function() {
        alert(this.age)
    }
    var instance1 = new SubType('bug', 30)

4；原型式继承

function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
    }

5；寄生式继承

function creatAnother(original) {
        var clone = object(original);
        clone.sayHi = function() {
            alert("hi")
        }
        return clone;
    }

6；寄生组合式继承

function SuperType(name) {
    
        this.name = name;
    
        this.colors = ["red", "blue", "green"];
    
    }
    
    SuperType.prototype.sayName = function() {
    
        alert(this.name);
    
    }
    
    function SubType(name, age) {
    
        SuperType.call(this, name); //第二次调用SuperType()
    
        this.age = age;
    
    }
    
    SubType.prototype = new SuperType(); //第一次调用SuperType()
    
    SubType.prototype.sayAge = function() {
    
        alert(this.age);
    
    }

第七章 函数表达式

一、 闭包：有权访问另外一个函数做用域中的变量　

二、闭包与变量

function fun() {
    var result = [];
    for (var i = 0; i < 10; i++) {
        result[i] = function() {
            return i;
        }
    }
    return reslut
}

每一个函数都返回10；安全

function fun() {
    var reslut = [];
    for (var i = 0; i < 10; i++) {
        result[i] = function(num) {
            return function() {
                return num;
            }
        }(i)
    }
    return result;
}

返回1-10服务器

三、this指向问题:

(1)在全局函数中，this等于window,
(2)做为对象的方法调用时，this等于那个对象。闭包

var name = "window";
var object = {
    name: "object";
    getName：
    function() {
        return function() {
            return this.name
        }
    }
}

alert(object.getName()()) // window

var name = "window";
var object = {
    name: "object";
    getName：
    function() {
        var _this = this;
        return function() {
            return _this.name
        }
    }
}
alert(object.getName()()) // object

4.模仿块级做用域

(function(){
    
})()

第八章 BOM

IE: trident内核
Firefox：gecko内核
Chrome:Blink内核

一、location 对象
二、navigator 对象
三、history 对象

第十章 DOM

appendChild 添加
inserBefore 插入
replaceChild 替换
removeChild 删除

第十一章 DOM 扩展

一、querySelector()
二、querySelectorAll()
三、getElementsByClassName()
4.classList 属性
（1）add()
（2）contains()
（3）remove()
（4）toggle()
五、children 属性

第二十一章 ajax

ajax：页面无刷新请求操做

一、ajax步骤：

（1） 启动

（2） 发送

（3） 接收

（4） 完成

get 用于想服务器查询信息
post 用于向服务器发送信息

二、CORS 跨云资源共享

跨浏览器的 CORS

function CORS(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, url, true)
    } else if (typeof XDomainRequset != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url)
    } else {
        xhr = null;
    }
    reutrn xhr;
}
var req = CORS("get", "wwww")

三、jsonp 跨域

定义：动态建立script标签，回调函数

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程