【javascript】基础知识（上）

JavaScript基础知识（上）包括：变量类型和计算，原型和原型链，总结方式是：题目+知识点解答总结。

目录：
★变量类型和计算

1. JavaScript中typeof后能得到哪些数据类型？
2. 什么时候用三等？什么时候用两等？
3. JavaScript中的内置函数有哪些？
4. JavaScript变量按照存储方式分为哪些类型，并描述其特点
5. 如何理解JSON？
   ★原型和原型链
6. 如何判断一个变量是数组类型？
7. 写一个原型继承的例子
8. 描述new一个对象的过程
9. 原型规则
10. .zepto(或其他框架)如何使用原型链）
11. jQuery中如何使用原型

★变量类型和计算

1.JavaScript中typeof后能得到哪些数据类型？
解：boolean object(对象｛｝、数组[ ]、空指针对象null) string number undefined function
变量类型分为值类型和引用类型（对象、数组、函数）
typeof能区分值类型的变量，不能区分引用类型的变量（function除外）

2.什么时候用三等？什么时候用两等？
解：建议都使用三等，原因如下：
a.严谨、一致性：三等会对两边的表达式进行严格的判断，包括值的类型和值本身，严谨，有利于一致性
b.简单和性能：两等会对两边的表达式类型进行强制类型转换，而三等就不用，比较简单，而且在大多数浏览器中，三等比两等 速度更快，提高了性能
c.==会进行强制类型转换，但结果可能不是你想要的，比如 5+“2” //52;

如果非要用==，以下两种情况可以参考：
A.判断对象的属性是否存在

var obj = {};
    if (obj.a == null) {
        //这里相当于obj.a===null||obj.a===undefined的简写形式
        //这是jQuery源码中推荐的写法
    }

B.判断函数的参数是否存在的时候可以用==

function fn(a,b){
        if(b==null){
            //这里相当于b===null||b===undefined的简写形式
        }
    }

3.JavaScript中的内置函数有哪些？

解：Boolean Object String Number Array Function Date RegExp Error


4.JavaScript变量按照存储方式分为哪些类型，并描述其特点

解：js变量类型按照存储方式分为值类型和引用类型。
（1）值类型（基本类型）：字符串（string）、数值（number）、布尔值（boolean）、undefined、null (ECMAScript 2015新增了一种基本数据类型：symbol , 故基本数据类型有6种)

（2）引用类型：对象（Object）、数组（Array）、函数（Function）
值类型变量对应的内存空间中存储的就是值，

	var a=100;
    var b=a;   //这块b会将a复制一份存在b所申请的栈内存空间，所以后续对a的操作不会影响b的值
    a=200;
    console.log(b);   //100

引用类型变量对应的内存空间中存储的是地址

var a={age:20};
    var b=a;
    a.age=21;
    console.log(b.age);   //21

引用类型变量（对象、数组、函数）可无限扩展，为节省内存空间，多个变量公用一块内存空间，所以值的修改是相互干预的

5.如何理解JSON？

解：JSON不仅是一种数据格式，也是一个JavaScript对象，JSON有两种常用的API：

	JSON.parse("{'a':10,'b':20}");   //将字符串转换成JSON对象
    JSON.stringify({a:10,b:20});      //将JSON对象转换成字符串

★原型和原型链
1.如何判断一个变量是数组类型？

解：

    var arr=[];
    console.log(arr instanceof Array);      //true
    console.log(typeof arr);           //Object,不能判断是否是数组

2.写一个原型继承的例子

解：DOM查询的例子

    function Elem(id){
        this.elem=document.getElementById(id);
    }
    Elem.prototype.html=function(val){
        var elem=this.elem;
        if(val){
            elem.innerHTML=val;
            return this               //为了可以链式操作
        }else{
            return elem.innerHTML;
        }
    }
    Elem.prototype.on=function(type,fn){
        var elem=this.elem;
        elem.addEventListener(type,fn);
        return this
    }
    var div1=new Elem('div1');
    div1.html('<p>hello world</p>').on('click',function(){
        alert('clicked');
    });

3.描述new一个对象的过程

解：
a.创建一个新对象
b.this指向这个新对象
c.执行代码，即对this赋值
d.返回this

4.原型规则

解：
a.所有的引用类型(数组、对象、函数)，都具有对象特性，即可自由扩展属性(除了"null"对象以外)
b.所有引用类型都有一个_proto_(隐式原型)属性，属性值是一个普通的对象
c.所有函数都有一个prototype(显示原型)属性,属性值也是一个普通对象
d.所有的引用类型，proto_属性值指向它的构造函数的"prototype"属性值
e.当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去它的_proto(即它的构造函数的prototype)中寻找 例子

//构造函数
  function Foo(name,age){
      this.name = name
  }
  Foo.prototype.alertName= function(){
      alert(this.name+"killua");
  }
  //创建示例
 var f = new Foo("L");
 f.lastName = function(){
     console.log(this.name)
 }
 f.lastName();           //"L",自身属性
 f.alertName();          //"Lkillua"，原型属性
 //以上函数中，f共有3个属性，f自身的属性有2个(name属性和lastName属性),还有一个alertName是原型属性
 f.firstName();//这里f自身属性中没有firstName属性，它的原型Foo函数中也么有这个属性，所以要再往上一层Foo的原型上去找这个属性，这种有多层原型的函数就是原型链，直到null为止结束原型链
 var item;
 for(item in f){
     // 高级浏览器已经在 for in 中屏蔽了来自原型的属性，但是这里建议加上这个判断，保证程序的健壮性
     if(f.hasOwnProperty(item)){  //循环遍历f函数，如果f函数有它自身的属性item,则打印出item属性
         console.log(item)
     }
 }

5.zepto(或其他框架)如何使用原型链）

解：
Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小。Zepto最大的优势是它的文件大小，只有8k多，是目前功能完备的库中最小的一个。

(function (window) {

    var zepto = {}

    function Z(dom, selector) {
        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }

    zepto.Z = function (dom, selector) {
        return new Z(dom, selector)
    }

    zepto.init = function (selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))
        return zepto.Z(dom, selector)
    }

    var $ = function (selector) {
        return zepto.init(selector)
    }
    window.$ = $

    $.fn = {
        css: function (key, value) {
            alert('css')
        },
        html: function (value) {
            return '这是一个模拟的 html 函数'
        }
    }
    Z.prototype = $.fn
})(window)

6.jQuery中如何使用原型

(function (window) {

    var jQuery = function (selector) {
        return new jQuery.fn.init(selector)
    }

    jQuery.fn = {
        css: function (key, value) {
            alert('css')
        },
        html: function (value) {
            return 'html'
        }
    }

    var init = jQuery.fn.init = function (selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))

        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }

    init.prototype = jQuery.fn

    window.$ = jQuery

})(window)