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

 

第十四讲  面向对象

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()

④意外使用全局变量

 

你可能感兴趣的:(大前端高频面试题)