js基础知识1

介绍JavaScript的基本数据类型。

ECMAScript中有5中简单数据类型（也称为基本数据类型）: Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。

其中Undefined、Null、Boolean、Number都属于基本类型。Object、Array和Function则属于引用类型，String有些特殊，具体的会在下面展开分析。
string类型有些特殊，因为字符串具有可变的大小，所以显然它不能被直接存储在具有固定大小的变量中。由于效率的原因，我们希望JS只复制对字符串的引用，而不是字符串的内容。但是另一方面，字符串在许多方面都和基本类型的表现相似，而字符串是不可变的这一事实（即没法改变一个字符串值的内容），因此可以将字符串看成行为与基本类型相似的不可变引用类型

Boolean、Number、String 这三个是Javascript中的基本包装类型，也就是这三个其实是一个构造函数，他们是Function的实例，是引用类型，至于这里的String与以上说的String是同名，是因为其实上文说的String是指字符串，这里的String指的是String这个构造函数，上面那么写，是为了更好的理解，因为Javascript是松散类型的。我们可以看下String实例化的例子：

var name = String("jwy");
alert(typeof name);//"object"
var author = "Tom";
alert(typeof name);//"string"

说说写JavaScript的基本规范？

JavaScript原型，原型链?有什么特点？

原型：
每个对象都会在其内部初始化一个属性，就是prototype(原型)。

原型链：
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象

JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？

两大类：

栈：原始数据类型（Undefined，Null，Boolean，Number、String）

堆：引用数据类型（对象、数组和函数）

区别：

两种类型的区别是：存储位置不同；

原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；

引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其

在栈中的地址，取得地址后从堆中获得实体

Javascript如何实现继承？

既然要实现继承，那么首先我们得有一个父类，代码如下：

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

1、原型链继承

核心： 将父类的实例作为子类的原型

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

特点：
非常纯粹的继承关系，实例是子类的实例，也是父类的实例
父类新增原型方法/原型属性，子类都能访问到
简单，易于实现

缺点：
要想为子类新增属性和方法，必须要在new Animal()
这样的语句之后执行，不能放到构造器中
无法实现多继承
来自原型对象的引用属性是所有实例共享的
创建子类实例时，无法向父类构造函数传参

推荐指数：★★（3、4两大致命缺陷）

2、构造继承

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：
解决了1中，子类实例共享父类引用属性的问题
创建子类实例时，可以向父类传递参数
可以实现多继承（call多个父类对象）

缺点：
实例并不是父类的实例，只是子类的实例
只能继承父类的实例属性和方法，不能继承原型属性/方法
无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

推荐指数：★★（缺点3）

3、实例继承

核心：为父类实例添加新特性，作为子类实例返回

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

特点：
不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点：
实例是父类的实例，不是子类的实例
不支持多继承

推荐指数：★★

4、拷贝继承

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：
支持多继承

缺点：
效率较低，内存占用高（因为要拷贝父类的属性）
无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

推荐指数：★（缺点1）
5、组合继承
核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

特点：
弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
既是子类的实例，也是父类的实例
不存在引用属性共享问题
可传参
函数可复用

缺点：
调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

推荐指数：★★★★（仅仅多消耗了一点内存）

6、寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

特点：
堪称完美
缺点：
实现较为复杂

推荐指数：★★★★（实现复杂，扣掉一颗星）

function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
  //实例引用属性
  this.features = [];
}
function Cat(name){
}
Cat.prototype = new Animal();

var tom = new Cat('Tom');
var kissy = new Cat('Kissy');

console.log(tom.name); // "Animal"
console.log(kissy.name); // "Animal"
console.log(tom.features); // []
console.log(kissy.features); // []

tom.name = 'Tom-New Name';
tom.features.push('eat');

//针对父类实例值类型成员的更改，不影响
console.log(tom.name); // "Tom-New Name"
console.log(kissy.name); // "Animal"
//针对父类实例引用类型成员的更改，会通过影响其他子类实例
console.log(tom.features); // ['eat']
console.log(kissy.features); // ['eat']

原因分析：

关键点：属性查找过程

执行tom.features.push，首先找tom对象的实例属性（找不到），
那么去原型对象中找，也就是Animal的实例。发现有，那么就直接在这个对象的
features属性中插入值。
在console.log(kissy.features); 的时候。同上，kissy实例上没有，那么去原型上找。
刚好原型上有，就直接返回，但是注意，这个原型对象中features属性值已经变化了。

Javascript创建对象的几种方式？

1. 使用Object构造函数来创建一个对象，下面代码创建了一个person对象，并用两种方式打印出了Name的属性值。

   var person = new Object();
   person.name="kevin";
   person.age=31;
   alert(person.name);
   alert(person["name"])

2. 使用对象字面量创建一个对象；不要奇怪person["5"],这里是合法的；另外使用这种加括号的方式字段之间是可以有空格的如person["my age"].

    var person =  {
        name:"Kevin",
        age:31,
        5:"Test"
    };
    alert(person.name);
    alert(person["5"]);

3. 使用工厂模式创建对象,返回带有属性和方法的person对象。

function createPerson(name, age,job) {
    var o = new Object();
    o.name=name;
    o.age=31;
    o.sayName=function() {
        alert(this.name);
    };
    return o;
}
createPerson("kevin",31,"se").sayName();

4. 使用自定义构造函数模式创建对象；这里注意命名规范，作为构造函数的函数首字母要大写，以区别其它函数。这种方式有个缺陷是sayName这个方法，它的每个实例都是指向不同的函数实例，而不是同一个。

function Person(name,age,job) {
    this.name=name;
    this.age=age;
    this.job=job;
    this.sayName=function() {
      alert(this.name);
    };
}
var person = new Person("kevin",31,"SE");
person.sayName();

5. 使用原型模式创建对象；解决了方法4中提到的缺陷，使不同的对象的函数（如sayFriends）指向了同一个函数。但它本身也有缺陷，就是实例共享了引用类型friends，从下面的代码执行结果可以看到，两个实例的friends的值是一样的，这可能不是我们所期望的。

 function Person(){
 }
 Person.prototype = {
    constructor : Person,
    name:"kevin",
    age:31,
    job:"SE",
    friends:["Jams","Martin"],
    sayFriends:function() {
        alert(this.friends);
    }
 };

 var person1 = new Person();
 person1.friends.push("Joe");
 person1.sayFriends();//Jams,Martin,Joe
 var person2 = new Person(); 
 person2.sayFriends();//James,Martin,Joe

6. 组合使用原型模式和构造函数创建对象，解决了方法5中提到的缺陷，而且这也是使用最广泛、认同度最高的创建对象的方法。

function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
　　 this.friends=["Jams","Martin"];
}
Person.prototype.sayFriends=function(){
    alert(this.friends);
};
var person1 = new Person("kevin",31,"SE");
var person2 = new Person("Tom",30,"SE");
person1.friends.push("Joe");
person1.sayFriends();//Jams,Martin,Joe
person2.sayFriends();//Jams,Martin

7. 动态原型模式；这个模式的好处在于看起来更像传统的面向对象编程，具有更好的封装性，因为在构造函数里完成了对原型创建。这也是一个推荐的创建对象的方法。

function Person(name,age,job) {
    //属性
    this.name=name;
    this.age=age;
    this.job=job;
    this.friends=["Jams","Martin"];
    //方法
    if(typeof this.sayName !="function") {
        Person.prototype.sayName=function() {
            alert(this.name);
        };
        Person.prototype.sayFriends=function() {
            alert(this.friends);
        };
    }
}
var person = new Person("kevin",31,"SE");
person.sayName();
person.sayFriends();

Javascript作用链域?

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。例如定义下面这样一个函数：

function add(num1,num2) {
    var sum = num1 + num2;
    return sum;
}

在函数add创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示（注意：图片只例举了全部变量中的一部分）：

add创建时的作用域链

函数add的作用域将会在执行时用到。例如执行如下代码：
var total = add(5,10);
执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象，运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链，用于标识符解析，当运行期上下文被创建时，而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象，叫“活动对象(activation object)”，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

total 创建时的作用域链

在函数执行过程中，没遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义。函数执行过程中，每个标识符都要经历这样的搜索过程。

作用域链和代码优化
从作用域链的结构可以看出，在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上图所示，因为全局变量总是存在于运行期上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。例如下面的代码：

function changeColor(){
    document.getElementById("btnChange").onclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：

function changeColor(){
    var doc=document;
    doc.getElementById("btnChange").onclick=function(){
        doc.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

这段代码比较简单，重写后不会显示出巨大的性能提升，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。

js 的 with 语句如何深入理解？

with 语句用于设置代码在特定对象中的作用域。

var sMessage = "hello";
with(sMessage) {
  alert(toUpperCase()); //输出 "HELLO"
}

在这个例子中，with 语句用于字符串，所以在调用 toUpperCase() 方法时，解释程序将检查该方法是否是本地函数。如果不是，它将检查伪对象 sMessage，看它是否为该对象的方法。然后，alert 输出 "HELLO"，因为解释程序找到了字符串 "hello" 的 toUpperCase() 方法。

提示：with 语句是运行缓慢的代码块，尤其是在已设置了属性值时。大多数情况下，如果可能，最好避免使用它。

var a = 123;
var b = {a : 321};
with(b){
    console.log(a); // 321
}

var a = 123;
var b = {}; //这里去掉b中的a属性
with(b){
    console.log(a); // 123
}

with语句中把对象b里面的属性的优先级高于该with所在作用域中其他同名变量。

谈谈This对象的理解。

简单来说 谁调用的方法this就是指向谁
1.函数调用(指向window) 简单不举例了
2.作为构造函数调用 ，指向使用new 产生的新对象
3.作为对象的方法调用

        function test(){
            alert(this.x);
        }
        var o = {};
        o.x=1;
        o.m=test;
        o.m();  //1
        //o.m=test();  //undefined

4.作为元素的节点

        var value = 'nihao';
        function f1(){
            alert(this.value);
        }
        var val = document.getElementById('email');
        val.onclick=f1;

在点击input之后我们会看到弹出的是我们输入的值，而不是window对象的’nihao’，这是 因为每一个获取的DOM元素也是一个对象；
5.call()和apply()
这两个函数的作用是相同的语法有一点不同；
他的作用是改变函数的调用对象，他的第一个参数就表示改变后的调用这个函数的对象(就是改变使用这个函数对象的this指向)
看下面的代码：

var name="helios";
    function setName(addr,weight){
        console.log(this.name+'---'+addr+'---'+weight);
        console.log('wancheng');
    }
    var cat = {name:'hei',age:12},
        dog = {name:'gou'};
    setName.call(dog,'shangsha',32);
    setName.apply(cat,['beijing',21]);

非预期效果

    var obj={
        bar:"yuansu",
        foo:function(){
            (function(){
                alert(this.bar);//这个this指向的window对象 会弹出undefined；
            })()
        }
    }
    obj.foo();

这里先要指出一个误区，不是在函数里面定义的函数，this就是指向的上一级函数的this这是不正确的，在函数里面定义的函数也是要看是谁调用的这个函数(方法)this才是谁；在这里并不是obj调用foo里面的匿名函数，实际上是window,如果想要达到预期的效果值许改一点代码就可以了，看下面代码：

    var obj={
        bar:"yuansu",
        foo:function(){
            var self = this;  //把obj这个对象用self保存下来
            (function(){
                alert(self.bar);//这里的self就是obj了
            })()
        }
    }
    obj.foo();

总结

调用形式	this指向
普通函数	window
构造函数	实例化后的对象
对象的方法	该对象
DOM节点	该节点对象
call或者apply	第一个参数

eval是做什么的？

把字符串参数解析成JS代码并运行，并返回执行的结果；
eval的作用域

functiona(){  
 eval("var x=1"); //等效于 var x=1;  
 console.log(x); //输出1  
}  
a();  
console.log(x);//错误 x没有定义  

说明作用域在它所有的范围内容有效

functiona(){  
 window.eval("var x=1"); // 等效于window.x=1;定义了全局变量  
 console.log(x); //输出1  
}  
a();  
console.log(x);//输出1  

什么是window对象?什么是document对象?

Window -- 代表浏览器中一个打开的窗口：
对象属性　　
window //窗口自身　　
window.self //引用本窗户window=window.self　　
window.name //为窗口命名　　
window.defaultStatus //设定窗户状态栏信息　　
window.location //URL地址，配备布置这个属性可以打开新的页面
对象方法　　
window.alert("text") //提示信息会话框　　
window.confirm("text") //确认会话框　　
window.prompt("text") //要求键盘输入会话框
window.setIntervel("action",time) //每一隔指定的时间(毫秒)就执行一次操作　　
window.clearInterval() //清除时间配备布置作用就是终止轮回　　window.setTimeout(action,time) //隔了指定的时间(毫秒)执行一次操作　　window.open() //打开新的窗口　　
window.close() //关闭窗口
成员对象　　
window.event　　
window.document //见document对象详解　　
window.history　　
window.screen　　
window.navigator　　
window.external　　
-------------------------------------------------- -------------------　　
window.history对象　　
window.history.length //浏览过的页面数　　
history.back() //后退　　
history.forward() //前进　　
history.Go(i) //前进或后退到历史记录的第i个页面　　//i>0进步,i<0 后退　
------------------------------------------------- -------------------　　
window.screen对象 　
window.screen.width //屏幕宽度　　
window.screen.height //屏幕高度　　
window.screen.colorDepth //屏幕色深　　
window.screen.availWidth //可用宽度　　
window.screen.availHeight //可用高度(除去任务栏的高度)　　
-------------------------------------------------- -------------------　　
window.external对象　　
window.external.AddFavorite("地址","标题" ) //把网站新增到保藏夹　　
-------------------------------------------------- -------------------　　window.navigator对象　　
window.navigator.appCodeName //浏览器代码名　　
window.navigator.appName //浏览器应用程序名　　
window.navigator.appMinorVersion //浏览器补丁版本　　window.navigator.cpuClass //cpu类型 x86　　
window.navigator.platform //操作体系类型 win32　　
window.navigator.plugins　　
window.navigator.opsProfile　　
window.navigator.userProfile　　
window.navigator.systemLanguage //客户体系语言 zh-cn简体中文　　
window.navigator.userLanguage //用户语言,同上　　
window.navigator.appVersion //浏览器版本　　
window.navigator.userAgent　　
window.navigator.onLine //用户否在线　　
window.navigator.cookieEnabled //浏览器是否撑持cookie　　window.navigator.mimeTypes

document对象 -- 代表整个HTML 文档,可用来访问页面中的所有元素：
对象属性
document.title //设置文档标题等价于HTML的