js基础

声明变量带var和不带var的区别？

在全局作用域中申明变量相当于给全局对象window增加了一个属性名
在全局作用域下，不带var 仅仅给全局对象设置一个新的属性

使用单例模式实现模块化开发

模块化开发：把复杂页面按功能进行划分成几大模块进行开发，这种思想就是模块开发思想

var obj = {
    name:function(){
      ...
    }
}

高级单例模式

基于js高阶编程技巧惰性思想来实现的单例模式

var search = (function(){
    function submit(){}
      return {
            init : function(){
                this.submit();
            }
      }
})();
search.init(); 

面向对象（oop）

面向对象是编程思想

对象、 类、 实例

对象： 编程语言中的对象是一个泛指，万物皆对象
类：对象的具体细分（按照属性或者是特性分为一些类）
实例：某一类中的具体事物。

构造函数设计模式（constructor）

使用构造函数方式，主要是为了创造类和实例的，也就是基于面向对象编程思想来实现一些需要的处理
在js中，当我们使用new xxx()执行函数的时候此时的函数就不是普通的函数了，而是变成一个类，返回的结果叫做当前类的实例，我们这种new xxx执行的方式称之为构造函数设计模式

      function fn(){
          ...
      }
      new fn();

普通函数执行 vs 构造函数执行

普通函数执行:

1、开辟一个新的私有作用域
2、形参赋值
3、变量提升
4、代码自上而下执行
5、栈内存释放或者不释放问题

function fn(num){
    this.num = num; //=> this:window
    var total = null;
          total += num;
      return total; 
}
var f = fn(10); //=> f:10

构造函数执行:

1、开辟一个新的私有作用域
2、形参赋值以及变量提升
3、代码自上而下执行前，浏览器会在当前的作用域中国默认创建一个对象数据类型的值，并且会让当前函数中的this指向创建的这个对象
4、代码自上而下执行this.xxx = xxx 这里操作都是在给创建的这个对象增加属性名和属性值
5、代码执行完成后，即时函数中没有写return，在构造函数模式中：浏览器会默认把创建的对象返回到函数的外面

function Fn(num){
    this.num = num
}
var f = new Fn(10);

    function Fn(){
          var num = 100;
          this.name = 'hyq';
    }
    var f1 = new Fn();
    var f2 = new Fn;
  
    console.log(f1.num); // =>undefined
    console.log(f1.name) //=>hyq

数据类型检测

instanceof 用来检测当前实例是否属于某个类 返回ture/false
typeof 用于检测基本数据类型
object.proptotype.toString.call()

原型链查找机制

实例的_proto_ ==>类.prototype 类的constructor ===>类本身 实例没有constructor
类的_proto_ ==> Object.prototype Object没有_proto_

原型与原型链

所有的函数天生自带一属性 proptotype（对象数据类型的值），存贮着当前类或者实例的公共方法或者属性。
在proptotype对象中存在一个constructor属性，这个属性存储的是整个函数本身
每个类的实例都天生自带一属性_proto_,属性值是当前对象所属类的原型

image.png

hasownproperty

检测当前属性是否属于某个对象或者类的私有属性

obj.hasPubProperty() 检测当前属性书否属于共有

function hasPubProperty(attr,obj){
  return (attr in obj) && (obj.hasOwnProperty(attr) === false)
 }

获取数组中的最大/小值

第一种

sort()先排序

第二种

假设法

var ary = [12,2,3,4,5,778,32,11];
var max = ary[0],
   min = ary[0];
for(var i =1; i < ary.length; i++){
    var item = ary[i];
    item > max ? max = item : null;
    item < min  ? min =  item : null;
 }

第三种

利用Math函数

var ary = [12,2,3,4,5,778,32,11];
 eval('Math.max('+ary.toString()+')');
 eval('Math.min('+ary.toString()+')');

第四种

利用Math函数 / es6展开运算符

var ary = [12,2,3,4,5,778,32,11];
 Math.max.apply(Math,ary);

ajax 简单实现原理

  (function(){
     function ajax(options) {
        var _default = {
            url: null,
            data: null,
            method: 'get',
            dataType: "json",
            async: "true",
            cache: true,
            success: null,
            error: null
        }
        for (var key in options) {
            if (key === 'type') {
                _default.method = options['type'];
            }
            _default[key] = options[key];
        }
        var xhr = new XMLHttpRequest;
        xhr.open(_default.method, _default.url, _default.async);
        xhr.onreadystatechange = function () {
            if (/^(2|3)\d{2}$/.test(xhr.status)) {
                if (xhr.readyState == 4) {
                    var result = xhr.responseText;
                    switch (_default.dataType.toUpperCase()) {
                        case "JSON":
                            result = "JSON" in window ? JSON.parse(result) : eval(result);
                            break;
                        case "XML":
                            result = xhr.responseXML;
                            break;
                    }
                    _default.success && _default.success.call(xhr, result);
                }
                _default.error && _default.error.call(xhr, result);
            }
            return;
        }
        xhr.send(_default.data);
    }
  })()

This指针

• DOM0级事件 与DOM2级事件中的this指向

  DOM0级绑定事件
    obj.onclick=function(){
        //this ==> obj
  }

   IE6~8下  DOM2级绑定事件
    obj.attachEvent("onclick",function(){
        //this ==> window
  })

正则表达式

• 主要用于处理字符串的规则。
  1、正则匹配（test（））
  2、正则捕获 （exec()）字符串支持正则的方法, split(),replace(),match()
  3、正则的元字符和修饰符

* 3.1 '修饰符' (img)
    i(ignoreCase) 忽略大小写
    g(global) 全局匹配
    m(multiline) 多行匹配

* 3.2 量词元字符
    +： 表示前面的元字符可以出现多次
    ?:  出现零到一次
    *：出现零到多次
    {n}: 出现n次
    {n,}出现n到多次
    {n,m}出现n到m次

* 3.3 特殊意义的元字符
    \: 转义字符
    \d: 匹配0-9之间的数字
    \D: 匹配任意一个非0-9之间的数字
    .: 处理 \n以外的其他字符
    \w: 匹配0-9或字母或_之间的字符
    \s: 匹配一个任意空字符
    \b: 匹配一个边界符
    x|y: 匹配x或者y其中的一个
    [a-z]:匹配a到z之间的一个
    [^a-z]:匹配非a到z之间的一个
    (): 匹配分组
    ^: 以什么开始
   $: 以什么结束
   ?: :指匹配不捕获
   ?=:正向预查
   ?! : 负向预查