ES6重点知识点总结（2）

 

ES6重点知识点总结（2）

• call和apply的作用是什么？区别是什么？

call和apply的功能基本相同，都是实现继承或者转换对象指针的作用；
唯一不通的是前者参数是罗列出来的，后者是存到数组中的；
call或apply功能就是实现继承的；与面向对象的继承extends功能相似；但写法不同；
语法：
.call(对象[,参数1，参数2,....]);//此地参数是指的是对象的参数，非方法的参数；
.apply(对象,参数数组)//参数数组的形式:[参数1，参数2,......]

• push()-pop()-shift()-unshift()分别是什么功能？

push 方法
将新元素添加到一个数组中，并返回数组的新长度值。
var a=[1,2,3,4];
a.push(5);
pop 方法
移除数组中的最后一个元素并返回该元素。
var a=[1,2,3,4];
a.pop();
shift 方法
移除数组中的第一个元素并返回该元素。
var a=[1,2];
alert(a.shift());
unshift 方法
将指定的元素插入数组开始位置并返回该数组。

• 介绍一下 JavaScript 原型，原型链，它们有何特点？

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

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();
alert(demo.age);
alert(demo.name); //得到被继承的属性

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

• 什么是闭包(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>

• 你对 JSON 了解吗？

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小。
如：{"age":"12", "name":"back"}

• Ajax 是什么？如何创建一个 Ajax ？

ajax的全称：Asynchronous Javascript And XML，异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
//
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新

• 同步和异步的区别？

同步的概念应该是来自于操作系统中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式)。
同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。
//
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
//
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

• 如何解决跨域问题？

jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面

• 谈一谈你对 ECMAScript6 的了解？

ECMAScript 6 是JavaScript语言的下一代标准，已经在2015年6月正式发布了。
它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。
因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。
也就是说，ES6就是ES2015

dom操作：

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

 

参考资源：https://www.jianshu.com/p/fc1faa8730b2