2018-09-09

js基础知识总结

变量类型及计算

问题:

1.js中使用type of能用到哪些变量

2.何时使用===何时使用==

3.js中有哪些内置函数

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

5.如何理解json

6.内置对象

解答:

1.符串(String)、数字(Number)、布尔(Boolean)、未定义(Undefined)、函数(其实为一个引用类型,非常特殊类型)

(function)Object[数组([]Array)、对象({}Object)、空(Null)、]。可见对于引用类型typeof并不能详细指明其类型,但是值类型可以。

2.obj,a==null相当于obj.a===null||obj.a===undefined

用双等情况:1)查看属性是否存在、2)函数中查看参数是否存在

3.内置函数(不考虑其环境9个)Object、Array、Boolean、Number、String、Function、Date、RegExp、Error

4.值类型(一个变量一个内存)、引用类型(好几个变量共用一个内存)

5.json也是一个Js对象(同math),也是一种数据格式

常用api:

json.stringify({a:10,b:20})对象转换成字符串

json.parse('{"a":10,"b",20}')字符串转换成对象

6.json、Math都为内置对象

原型与原型链

问题

1.如何准确判断一个变量是数组类型

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

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

4.zepto(或者其他框架)源码中如何使用原型链

解答

  1. var arr=[];
    arr instanceof Array //true2.eg1:贴近于实战
    

    eg1

    function Animal(){
         this.eat=function(){
            console.log("animal can eat");
         }
     }
     function Dog(){
         this.bark=function(){
         console.log('dog bark')
         }
     }
     Dog.prototype=new Animal();//就是一个对象,相当于实例化了一个没名字的对象
     var hashiqi=new Dog();
     console.log(hashiqi.eat)
    

eg2:

   function User() {  
    this.name = "zhangsan";
   }
   User.prototype.getName = function() {  
    return this.name;
   }
   function Student() {  
    this.age = 20;
   }
   Student.prototype = new User();
   //子类型有时候需要重写超类型中的某个方法,或者需要添加母类型中不存在的某个方法。但不管怎样,给原型添加方法的代码一定要放在替换原型的语句之后。
   Student.prototype.getAge = function() {  
    return this.age;
   }
   var x = new Student();
   console.log(x.getName());
   console.log(x.getAge());

eg3:封装dom查询的一个例子

   //构造函数
   function Elem(id) {
    // this.elem=document.getElementById(id);
    this.elem = document.getElementsByClassName(id)[0];
   }
   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('ctrl');
   div1.html('<p>hello mooc</p>').on('click', function() {
            alert('clicked');
    }).html('<p>hello mooc nihao</p>')

3.创建一个新对象:this指向这个新对象,执行代码时,即对this赋值(属性等),返回This
4.阅读源码是高效提高技能的方式(读个小的框架)但不能“埋头苦读”有技巧在其中,搜下结构如慕课网搜索"zapto设计和源码分析"

作用域与闭包

问题

1.说一下变量提升的理解

2.说明This几种不同的使用场景

3.创建10个<a>标签,点击的时候弹出来对应的序列号

4.如何理解作用域

5.实际开发中的闭包应用

解题:

1.变量的提升:执行上下文中首先变量定义,函数声明(与函数表达式的区别)

2.作为构造函数(this为实例对象)、对象属性(this.name,this为普通对象)、普通对象(this为window)、在call apply bind改变。

  1. for (var i = 0; i < 10; i++) {
    (function(i) {
    var a = document.createElement('a');
    a.innerHTML = i + '
    ';
    document.body.appendChild(a);
    a.addEventListener('click', function(e) {
    e.preventDefault(); //取消默认事件,指a标签
    alert(i);
    });
    })(i);
    }
    4.如何理解作用域:自由变量、作用域链,即自由变量的查找,闭包的场景

5.实际应用:封装变量,收敛权限

异步与单线程

问题

1.同步与异步的区别,举一个同步与异步的例子

2.一个settimeout的笔试

3.前端异步开发的例子

解答:

1.同步会阻塞代码执行,而异步不会,alert()同步,setTimeout()为异步

2.一个settimeout的笔试

console.log(1); 
setTimeout(function(){console.log(2)},0) ;
console.log(3);
setTimeout(function(){console.log(4)},1000);
console.log(5);//1 3 5 2  4
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容