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

原文地址:https://www.cnblogs.com/mahmud/p/10231024.html

时间: 2024-10-09 13:56:35

ES6重点知识点总结(2)的相关文章

java知识点、重点知识点

重点章节: 面对对象章节 重点知识点: Lambda表达式 数据:内存-->数据库 知识点一拦: 类.面向对象.对象.封装.继承.多态.消息.UML建模.数据类型(基本类型.引用类型).数据类型的转换(强制.自动) 运算符.数组.方法.变量.构造器.初始化块.内部类.包装类.常用工具类.接口.枚举类.正则表达式(字符串处理工具) .国际化.集合.泛型.异常处理

C++重点知识点(基础系列二)

C++重点知识点基类 C++重点知识点(基础系列二),布布扣,bubuko.com

ES6常用知识点

ES6常用知识,职场足用! 1.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: function aa() { if(flag) { var test = 'hello man' } else { console.log(test) } } 以上的代码实际上是: function aa() { var test // 变量提升,函数最顶部 if(flag) { t

ES6重点--笔记(转)

最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!我会用最通俗易懂的语言和例子来讲解它们,保证一看就懂,一学就会. let, const 这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途.首先来看下面这个例子

关于java重点知识点

JVM作为java运行的基础,很难相信对于JVM一点都不了解的人可以把java语言吃得很透.jvm不是唯一决定技术能力好坏的面试问题,但是可以佐证java开发能力的高低. 在JVM这个大类中,需要掌握的知识有:JVM内存模型和结构GC原理,性能调优调优:Thread Dump, 分析内存结构class 二进制字节码结构, class loader 体系 , class加载过程 , 实例创建过程方法执行过程:Java各个大版本更新提供的新特性(需要简单了解) 2. Java的运行(基础必备)这条可

ES6常用知识点小结

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不断更新,但并不是所有用户的电脑浏览器都支持ES6,所以在使用的过程中建议还是转成es5,保证代码的可执行性.至于转换的方式大家可以用Babel或者Traceur转码器. 1. let 和 const 在ES6以前,Javascript并没有块级作用域的概念,有的是全局作用域和函数作用域,而let的出

ES6重点

1. 作用域变量:var(ES5), le.t, const 三者之间的区别 const在声明引用数据类型和基本数据类型时候的区别(如:声明object时候是否可以改变里面的元素) 作用域的区别(在使用var的时候变量的提升,为什么会导致变量的提升.在使用let时候有什么好处) 2.拷贝 深拷贝 浅拷贝 如何实现深拷贝 3.箭头函数 箭头函数有哪些优点 在使用箭头函数时候this的指向问题 4.对于浮点数ES6做了哪些处理 5.数组中的解构赋值 6.对于symbol的使用与理解 7.set和ma

HeadFirst PHP重点知识点记录(一)

PHP中的双引号和单引号的区别还是很大的啊.对于单引号,会原样表示其中包含的文本,而对于双引号中的文本会做一些额外的处理.双引号里包含的变量会被变量的值取代.这很方便.所以在写数据库查询语句时,应该用双引号.写HTML语句时用单引号. PHP中的单引号只支持\'和\\ 转义字符,其他所有转义字符都只能用于双引号串中. die(status)函数可以在程序未被正确执行时立即停止脚本运行并且输出status信息. PHP在解释“true”条件时相当随意,任何非零(0).NULL或false的值都认为

恐怖,前端布局重点知识点之一,原来是它

一.本章学习的目标----盒模型 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 二.盒模型的概念 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系.css定义所有的元素都可以拥有像盒子一样的外形和平面空间.即都包含内容区.补白(填充).边框.边界(外边距)这就是盒模型. 标准盒模型 三.padding属性 Padding是设定页面中一个元素内容到元素的边框之间的距离. 也称补白 用法: 1)用来调整内容(子元素)在容器(父元素)中的位置关系 2)用来调