JavaScript的基础知识点(面试题)

电玩女神 2022-07-15 11:28 215阅读 0赞

### 1.介绍JavaScript的基本数据类型? ###

JavaScript的基本类型是: Undefined、Null、Boolean、Number、String

详细讲解: [http://www.jianshu.com/p/4841fcc6b4e7][http_www.jianshu.com_p_4841fcc6b4e7]

### 2.JavaScript原型,原型链?有什么特点? ###

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，  
于是就这样一直找下去，也就是我们平时所说的原型链的概念。  
关系：`instance.constructor.prototype = instance.__proto__`  
//  
特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本，当我们修改原型时，与之相关的对象也会继承这一改变。  
//  
当我们需要一个属性时，JavaScript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找它的prototype对象是否有这个属性，如此递推下去，一致检索到Object内建对象。

### 3.JavaScript如何实现继承? ###

*  (1)构造继承
 *  (2)原型继承
 *  (3)实例继承
 *  (4)拷贝继承  
    //  
    原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。

function Parent() { 
      this.name = 'song';
    }
    function Child() { 
      this.age = 28;
    }
    Child.prototype = new Parent(); //通过原型,继承了Parent
    //
    var demo = new Child()l;
    alert(demo.age);
    alert(demo.name); //得到被继承的属性

### 4.JavaScript创建对象的几种方式? ###

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。

*  (1)对象字面量的方式  
    `person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};`
 *  (2)用function来模拟无参的构造函数

function Person(){ }
    var person = new Person(); //定义一个function，如果使用new"实例化",该function可以看作是一个Class
    person.name = "Xiaosong";
    person.age = "23";
    person.work = function() { 
      alert("Hello " + person.name);
    }
    person.work();

*  (3)用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

function Person(name,age,hobby) { 
      this.name = name; //this作用域：当前对象
      this.age = age;
      this.work = work;
      this.info = function() { 
          alert("我叫" + this.name + "，今年" + this.age + "岁，是个" + this.work);
      }
    }
    var Xiaosong = new Person("WooKong",23,"程序猿"); //实例化、创建对象
    Xiaosong.info(); //调用info()方法

*  (4)用工厂方式来创建（内置对象）

var jsCreater = new Object();
    jsCreater.name = "Brendan Eich"; //JavaScript的发明者
    jsCreater.work = "JavaScript";
    jsCreater.info = function() { 
      alert("我是"+this.work+"的发明者"+this.name);
    }
    jsCreater.info();

*  (5)用原型方式来创建

function Standard(){ }
    Standard.prototype.name = "ECMAScript";
    Standard.prototype.event = function() { 
      alert(this.name+"是脚本语言标准规范");
    }
    var jiaoben = new Standard();
    jiaoben.event();

*  (6)用混合方式来创建

function iPhone(name,event) { 
      this.name = name;
      this.event = event;
    }
    iPhone.prototype.sell = function() { 
      alert("我是"+this.name+"，我是iPhone5s的"+this.event+"~ haha!");
    }
    var SE = new iPhone("iPhone SE","官方翻新机");
    SE.sell();

### 　5.JavaScript作用域链? ###

JavaScript中所有的量都是存在于某一个作用域中的  
除了全局作用域, 每一个作用域都是存在於某个作用域中的  
在试图访问一个变量时JS引擎会从当前作用域开始向上查找直到Global全局作用域停止  
例如

var A;//全局作用域
    function B() { 
        var C;//C位于B函数的作用域
        function D() { 
            var E;//E位于D函数的作用域
            alert(A)
        }
    }

当alert(A)时, JS引擎沿着D的作用域, B的作用域, 全局作用域的顺序进行查找.  
这三个作用域组成的有序集合就成为作用域链  
至于为什么叫链, 你可以理解和链表有相似之处, 深层的作用域会能够访问到上层作用域, 就如同链表中两个连续节点能够单向访问一样

### 6.谈谈this对象的理解。 ###

详细讲解: [http://www.cnblogs.com/nuanriqingfeng/p/5794632.html][http_www.cnblogs.com_nuanriqingfeng_p_5794632.html]

this是函数运行时自动生成的一个内部对象，只能在函数内部使用，但总指向调用它的对象。

通过以下几个例子加深对this的理解。

*  （1）作为函数调用

var name = 'Jenny';
    function person() { 
        return this.name;
    }
    console.log(person());  //Jenny

上面这个例子在全局作用域中调用person()，此时的调用对象为window，因此this指向window，在window中定义了name变量，因此this.name相当于window.name，为Jenny。

*  （2）作为对象的方法调用

var name = 'Jenny';
    var obj = {
        name: 'Danny',
        person: function() { 
            return this.name;
        }
    };
    console.log(obj.person());  //Danny

在这个例子中，person()函数在obj对象中定义，调用时是作为obj对象的方法进行调用，因此此时的this指向obj，obj里面定义了name属性，值为Danny，因此this.name = “Danny”。

*  （3）作为构造函数调用

作为构造函数调用和普通函数调用的区别是，构造函数使用new关键字创建一个实例，此时this指向实例对象。

*  （4）apply和call

使用apply()和call()可以改变调用函数的对象，第一个参数为改变后调用这个函数的对象，其中apply()的第二个参数为一个数组，call的第二个参数为每个参数。

function person() { 
        return this.name;
    }
    var obj = {
        name: 'Jenny',
        age: 18
    };
    console.log(person.apply(obj));  //Jenny

### 7.什么是window对象? 什么是document对象? ###

详情请看参考资料: [http://www.w3school.com.cn/jsref/dom\_obj\_window.asp][http_www.w3school.com.cn_jsref_dom_obj_window.asp]

简单来说，document是window的一个对象属性。  
Window 对象表示浏览器中打开的窗口。  
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。  
所有的全局函数和对象都属于Window 对象的属性和方法。  
document 对 Document 对象的只读引用。

### 8.null 和 undefined 有何区别？ ###

null 表示一个对象被定义了，值为“空值”；  
undefined 表示不存在这个值。

*  typeof undefined  
    //”undefined”  
    undefined :是一个表示”无”的原始值或者说表示”缺少值”，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined；  
    例如变量被声明了，但没有赋值时，就等于undefined。
 *  typeof null  
    //”object”  
    null : 是一个对象(空对象, 没有任何属性和方法)；  
    例如作为函数的参数，表示该函数的参数不是对象；

注意：  
在验证null时，一定要使用　=== ，因为 == 无法分别 null 和　undefined

### 9.写一个通用的事件侦听器函数(机试题)。 ###

markyun.Event = {
      //页面加载完成后
      readyEvent: function(fn) { 
          if (fn == null) {
              fn = document;
          }
          var oldonload = window.onload;
          if (typeof window.onload != 'function') {
              window.onload = fn;
          }else{
              window.onload = function() { 
                  oldonload();
                  fn();
              };
          }
      },
      //视能力分别使用 demo0 || demo1 || IE 方式来绑定事件
      //参数：操作的元素，事件名称，事件处理程序
      addEvent: function(element,type,handler) { 
          if (element.addEventListener) {
              //事件类型、需要执行的函数、是否捕捉
              element.addEventListener(type,handler,false);
          }else if (element.attachEvent) {
              element.attachEvent('on' + type, function() { 
                  handler.call(element);
              });
          }else {
              element['on' + type] = handler;
          }
      },
      //移除事件
      removeEvent: function(element,type,handler) { 
          if (element.removeEventListener) {
              element.removeEventListener(type,handler,false);
          }else if (element.datachEvent) {
              element.datachEvent('on' + type,handler);
          }else{
              element['on' + type] = null;
          }
      },
      //阻止事件（主要是事件冒泡，因为IE不支持事件捕获）
      stopPropagation: function(ev) { 
          if (ev.stopPropagation) {
              ev.stopPropagation();
          }else {
              ev.cancelBubble = true;
          }
      },
      //取消事件的默认行为
      preventDefault: function(event) { 
          if (event.preventDefault) {
              event.preventDefault();
          }else{
              event.returnValue = false;
          }
      },
      //获取事件目标
      getTarget: function(event) { 
          return event.target || event.srcElemnt;
      },
      //获取event对象的引用，取到事件的所有信息，确保随时能使用event；
      getEvent: function(e) { 
          var ev = e || window.event;
          if (!ev) {
              var c = this.getEvent.caller;
              while(c) {
                  ev = c.argument[0];
                  if (ev && Event == ev.constructor) {
                      break;
                  }
                  c = c.caller;
              }
          }
          retrun ev;
      }
    };

### 10.\[“1”, “2”, “3”\].map(parseInt) 答案是多少？ ###

\[1,NaN,NaN\]

因为 parseInt 需要两个参数(val,radix)，其中 radix 表示解析时用的基数。  
map 传了3个(element,index,array)，对应的 radix 不合法导致解析失败。

### 11.什么是闭包（closure），为什么要用它？ ###

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包特性：

*  (1)函数内再嵌套函数
 *  (2)内部函数可以引用外层的参数和变量
 *  (3)参数和变量不会被垃圾回收机制回收

//li节点的onclick事件都能正确的弹出当前被点击的li索引
    <ul>
      <li> index = 0 </li>
      <li> index = 1 </li>
      <li> index = 2 </li>
      <li> index = 3 </li>
    </ul>
    <script type="text/javascript"> var nodes = document.getElementsByTagName('li'); for(i = 0;i<nodes.length;i+=1) { nodes[i].onclick = function() { console.log(i+1); //不使用闭包的话，值每次都是4 }(4); } </script>

### 12.new操作符具体干了什么呢? ###

*  (1)创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
 *  (2)属性和方法被加入到 this 引用的对象中。
 *  (3)新创建的对象由 this 所引用，并且最后隐式的返回 this 。

var obj = {};
    obj.__proto__ = Base.prototype;
    Base.call(obj);

### 13.用原生JavaScript的实现过什么功能吗？ ###

原生JavaScript能实现的功能,详情: [http://bbs.csdn.net/topics/390565578][http_bbs.csdn.net_topics_390565578]

### 14.Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？ ###

这个函数是: `hasOwnProperty`  
//  
JavaScript 中 hasOwnProperty 函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。  
//  
使用方法：  
object.hasOwnProperty(proName)  
其中参数object是必选项，一个对象的实例。  
proName是必选项，一个属性名称的字符串值。  
//  
如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

### 15.对JSON的了解？ ###

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。  
它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小。

如： `{"age":"12", "name":"back"}`

### 16.Ajax 是什么? 如何创建一个Ajax？ ###

ajax的全称：Asynchronous Javascript And XML。  
异步传输+js+xml。  
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

*  (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
 *  (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
 *  (3)设置响应HTTP请求状态变化的函数
 *  (4)发送HTTP请求
 *  (5)获取异步调用返回的数据
 *  (6)使用JavaScript和DOM实现局部刷新

### 17.DOM操作——怎样添加、移除、移动、复制、创建和查找节点? ###

*  (1)创建新节点  
    createDocumentFragment() //创建一个DOM片段  
    createElement() //创建一个具体的元素  
    createTextNode() //创建一个文本节点
 *  (2)添加、移除、替换、插入  
    appendChild()  
    removeChild()  
    replaceChild()  
    insertBefore() //在已有的子节点前插入一个新的子节点
 *  (3)查找  
    getElementsByTagName() //通过标签名称  
    getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)  
    getElementById() //通过元素Id，唯一性

### 18 .call() 和 .apply() 的作用和区别？ ###

1、call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的，因为它们的作用一样，只是使用方式不同。

2、语法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);

3、相同点：两个方法产生的作用是完全一样的。

4、不同点：方法传递的参数不同。

### 19.数组对象有哪些原生方法，列举一下？ ###

详细用法参考: [http://www.jb51.net/article/34711.htm][http_www.jb51.net_article_34711.htm]

赋值方法 (Mutator methods): 这些方法直接修改数组自身.

*  pop 和 push
 *  shift 和 unshift
 *  splice
 *  reverse
 *  sort

访问方法(Accessor methods) : 这些方法只是返回相应的结果，而不会修改数组本身 ;

*  concat
 *  join
 *  slice
 *  toString
 *  indexOf 和 lastIndexOf

迭代方法（Iteration methods）:

*  forEach
 *  map
 *  filter
 *  every 和 some
 *  reduce 和 reduceRight

### 20.JavaScript中的作用域与变量声明提升？ ###

#### 作用域 ####

作用域详情: [http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html][http_www.cnblogs.com_lhb25_archive_2011_09_06_javascript-scope-chain.html]

任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

#### 变量声明，命名，和提升 ####

变量声明提升详情: [http://blog.csdn.net/sunxing007/article/details/9034253][http_blog.csdn.net_sunxing007_article_details_9034253]

在javascript，变量有4种基本方式进入作用域：

*  1.语言内置：所有的作用域里都有this和arguments；(译者注：经过测试arguments在全局作用域是不可见的)
 *  2.形式参数：函数的形式参数会作为函数体作用域的一部分；
 *  3.函数声明：像这种形式：function foo()\{\}；
 *  4.变量声明：像这样：var foo；

[http_www.jianshu.com_p_4841fcc6b4e7]: http://www.jianshu.com/p/4841fcc6b4e7
[http_www.cnblogs.com_nuanriqingfeng_p_5794632.html]: http://www.cnblogs.com/nuanriqingfeng/p/5794632.html
[http_www.w3school.com.cn_jsref_dom_obj_window.asp]: http://www.w3school.com.cn/jsref/dom_obj_window.asp
[http_bbs.csdn.net_topics_390565578]: http://bbs.csdn.net/topics/390565578
[http_www.jb51.net_article_34711.htm]: http://www.jb51.net/article/34711.htm
[http_www.cnblogs.com_lhb25_archive_2011_09_06_javascript-scope-chain.html]: http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html
[http_blog.csdn.net_sunxing007_article_details_9034253]: http://blog.csdn.net/sunxing007/article/details/9034253