JS基础篇03

第10讲  BOM

什么是window对象？什么是document对象？

Window 对象：表示浏览器中打开的窗口。所有的全局函数和对象都属于Window 对象的属性和方法。
document对象：代表整个HTML 文档，可用来访问页面中的所有元素。
window是所有对象的容器，document是DOM对象容器，window包含document

 

offsetWidth、clientWidth、scrollTop的区别？

offsetWidth:width+左右padding+左右border

clientWidth:width+左右padding

scrollTop:元素内部可滚动内容的宽度

 

如何获取url地址中搜索内容？

location.search

 

 

第十一讲  事件

IE事件与火狐的事件机制有什么区别？

1.事件流描述的是从页面中接受事件的顺序，分为冒泡流和捕获流；

2.事件冒泡是指事件从最具体的元素接收，然后逐级向上传播，直到不具体的节点（通常指文档节点）；而事件捕获相反，它是从不具体的节点开始，逐步到最具体的节点；

3.IE的事件流是冒泡流，而火狐同时支持冒泡流和捕获流；
 

如何阻止冒泡？

event.stopPropagation();标准浏览器

event.cancelBubble = true;ie低版本

 

事件绑定和普通事件有什么区别？

事件绑定：

• addEventListener(事件类型，处理函数，是否捕获阶段触发)    标准浏览器
• obj.attachEvent('on'+事件类型，处理函数)  ie低版本浏览器

普通添加事件的方法事件是在冒泡阶段触发，不支持添加多个事件，最下面的事件会覆盖上面的；

事件绑定（addEventListener）方式添加事件可以添加多个。

 

如何用原生js给元素绑定两个click事件？

var btn = document.getElementById('btn');
btn.addEventListener('click',func1);
btn.addEventListener('click',func2);

语法：addEventListener(event,function,useCapture)
捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。顶到底，父到子。捕获阶段的主要任务是建立传播路经，在冒泡阶段根据这个路经回溯到文档根节点。

冒泡阶段：底上浮到顶，子告诉父，回溯到根节点。

 

解释一下事件流？

事件的传播过程，三个阶段：捕获-----确认目标------冒泡

 

事件委托是什么。

利用事件冒泡的机制，把相同的事件绑定给祖先元素，事件被触发时通过事件源判断具体要执行的操作

适用场景：（1）大量的元素要绑定相同的事件（2）元素的个数不确定（通过动态添加上去的）

 

给10000个li添加点击事件。

var ul = document.getElementById('ul');
ul.onclick = function(event){
    event = event || window.event;
    var tar = event.target || event.srcElement;
    if(tar.TagName == li){
        tar.style.backgroundColor = 'red';
    }
}

 

 

第12讲  js动画特效

拖拽效果中有几种事件？

全局捕获setCapture()  releaseCapture()

鼠标移动onmousemove

 

什么是回调函数？

作为另外一个函数的参数传入的函数，在主函数代码执行完之后调用的函数。

 

第13讲  cookie与正则表达式

使用正则表达式验证邮箱。

邮箱的地址规则：数字、字母、下划线 + @ + 数字、英文 + . +英文（长度是2-4）

var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/

 

请用js去除字符串空格 var str = 'fdf  er  re545  6565  2fdfd'

var str = 'fdf  er  re545  6565  2fdfd';
var reg = /^\s+*$/;
str = str.replace(reg,'');

 

判断字符串是否是这样组成的。第一个字符必须是字母，后面可以是字母、数字、下划线，总长度5-20。

var reg = /^(?![0-9]+$)[a-zA-Z0-9_]{5-20}$/

 

cookie的利弊？

优点：极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

因为这些弊端（主要是cookie的大小和多少都受限制，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用），IE8以后，就出现一个web storage；它仅仅是为了本地缓存数据而存在；但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在。

 

封装一个获取cookie的函数。

function getCookie(key){
      var str = document.cookie;
      var ary = str.split('; ');
      var obj = {};
      for(var i=0;i<ary.length;i++){
          var ary1 = ary[i].split('=');
          obj[ary1[0]] = ary1[1];
       }
       return obj[key];
}
console.log(getCookie('pass'));

 

第十四讲  面向对象

new操作符具体干了什么？

 var obj = new Object; 自动创建对象（实例）

 

call()和apply()的区别和作用？

都是用来改变函数执行时的this的指向

fn.call(obj.par1,par2,...)
fn.apply(obj,[par1,par2,...])

 

Javascript对象的几种创建方式？

1、字面量方式创建：var obj = {name:'dlwlrma' ,  age:20}

2、实例创建：var obj = new Object();

3、工厂模式创建

function creatObject(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    return obj;
}    

4、构造函数创建

function Girl(name,age){
    // var obj = new Object; 自动创建对象（实例）
    // 构造函数中用this表示当前创建出来的实例
    this.name = name;
    this.age = age;
    this.eat = function(){
    console.log(123);
  }
    // return obj;  自动返回对象
}
var girl = new Girl('dlwlrma',20);

5、原型创建对象

//原型模式
Girl.prototype.eat = function(){console.log(123);}//添加公有方法

6、原型+构造函数模式（混合模式）

function Girl(name,age){
    // var obj = new Object; 自动创建对象（实例）
    // 构造函数中用this表示当前创建出来的实例
    this.name = name;
    this.age = age;
    /* this.eat = function(){
          console.log(123);
    } */
    // return obj;  自动返回对象
}
//原型模式
Girl.prototype.eat = function(){
      console.log(123);
}
var girl = new Girl('dlwlrma',20);
girl.eat();

7、动态混合模式

function Girl(name,age){
    this.name = name;
    this.age = age;
    //判断公有方法是否存在，如果存在就不添加
    if(typeof this.eat != 'function'){
         Girl.prototype.eat = function (){
         console,log(123);
        }
    }
}
var girl = new Girl('dlwlrma',20);
girl.eat();

 

Javascript对象的几种继承方式？

1、原型链继承：把子类的原型设置为父类的一个实例

function Girl(name,age){
    this.name = name;
    this.age = age;
}
Girl.prototype.eat = function(){
    console.log(123);
}
        
function BeautifulGirl(){}
BeautifulGirl.prototype = new Girl('dlwlrma',20);//把子类的原型设置为父类的一个实例
var girl = new BeautifulGirl();
console.log(girl.name);

2、对象冒充继承：在子类的构造函数里面，把父类的构造函数当做普通函数运行，把this指向改成子类的实例。

function Girl(name, age) {
    this.name = name;
    this.age = age;
}
Girl.prototype.eat = function () {
    console.log('吃火锅');
}
function BeautifulGirl(name, age, hair) {
    Girl.call(this, name, age);//父类的构造函数运行，改变this的指向
    this.hair = hair;
}
var bg1 = new BeautifulGirl('如花', 18, '大波浪');
console.log(bg1);

var g1 = new Girl('ujiuye', 18);
console.log(g1);

3、组合继承(对象冒充+原型链）

原型链继承父类的公有方法，用对象冒充继承父类的私有属性

 

Javascript原型，原型链?

原型：js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。也就是说：当生产一个function对象的时候，就有一个原型prototype。原型中存储对象共享的属性和方法。

原型链：实例的__proto__指向所属类的prototype（原型），这个原型本身也是一个对象，它的__proto__指向父类的prototype，对象调用方法先从私有方法中查找，如果没有会逐级向上一级原型上去查找。

 

如何判断一个对象是否属于某个类？

obj instance Object

 

小贤有一条可爱的狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)，从这段描述可以得到以下对象：

function Dog(){
    his.wow = function(){
        alert('wow');
    }
    this.yelp = function(){
        this.wow();
    }
}

小芒和小贤一样原来也有一条可爱的狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按实例形式用代码来实现。(继承，原型，setInterval)

function Dog() {
        this.wow = function() {
          console.log("wow");
        };
        this.yelp = function() {
          this.wow();
        };
      }

      function MadDog(){
        this.yelp = function(){
          var _this = this;
          setInterval(function(){
            _this.wow();
          },500)
        }
      }
      MadDog.prototype = new Dog();
      var ba =new MadDog();
      ba.yelp();

 

第15讲  闭包与ajax

什么是闭包，闭包有什么作用，说说你对闭包的理解。

闭包:就是能够读取其他函数内部变量的函数（函数里面套函数，内部函数访问外部函数变量），
在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
作用：闭包中使用的变量会一直存储在内存中，类似全局变量 ，避免全局污染，可以解决全局变量的问题。

function fun(){
var c = 10;
return function(){
console.log(c++);
}
}
var f = fun(); //f = function(){ console.log(c++); }
f();//10
f();//11

 

用闭包方式完成下面代码的修改，使得属性user，id外界不可见：

User = function(){}

User.prototype = {

    id:'',

    name:'',

    getId:function(){return this.id},

    setId:function(id){this.id = id},

    getName:function(){return this.name},

    setName:function(name){this.name = name
}

 

User = function(id, name) {
    var _id = id;
    var _name = name;
    this.getId = function() {
          return _id;
    };
    this.setId = function(n) {
          _id = n;
    };
    this.getName = function() {
          return _name;
    };
    this.setName = function(n) {
          _name = n;
    };
};

 

写一个mul函数，使用方法如下

console.log(mul(2)(3)(4))  //24
console.log(mul(4)(3)(4))  //48

function mul(a){
    return function(b){
        return function(c){
            return a*b*c;
        }
    }
}

 

创建ajax的过程。

①创建异步对象   var ajax = HMLHttpRequest();

②设置请求参数  ajax.open(method,url,是否异步)；

③发送请求  ajax.send();

④监听请求事件 

ajax.onreadystatechange = function(){
    if(ajax.readystate == 4){
        if(ajax.status == 200){
            console.log(ajax.responseText);
        }
    }
}

 

ajax请求的时候get和post方式的区别，什么时候用post。

get一般中用来获取数据，数据放在地址栏传递，有大小限制，不安全

post一般用来提交数据，数据放在请求主体传递，理论上没有大小限制，相对安全

 

ajax请求时，如何解释json数据。

如果是字符串形式的json：eval("("+ajax.response+")")
如果是本地的json文件：JSON.parse(data)

 

同步和异步的区别？

同步：浏览器在请求数据的过程中不会一直等待，这段时间可以做其他的操作

异步：浏览器在请求数据的过程中，会一直等待事件的响应，知道返回结果才会执行其他操作

 

常见的http状态码？

1XX处理中

2XX成功返回内容

3XX重定向

4XX没有找到（资源不存在）

5XX（服务器故障）

 

eval的作用是？

传入一个字符串（数组形式），转化为具体的js的数据类型

 

js哪些操作会造成内存的泄漏？

①闭包

②遗忘的定时器

③控制台输出的内容console,log()

④意外使用全局变量