摘要:请解释事件代理事件代理也称为事件委托,利用了事件冒泡。同源指的是协议域名端口相同,同源策略是一种安全协议。目的同源策略保证了用户的信息安全,浏览器打开多个站点时,互相之间不能利用获取对方站点的敏感信息。
请解释事件代理(event delegation)
事件代理也称为事件委托,利用了事件冒泡。例如:
当页面li增多时多带带给每个li元素添加事件处理程序既繁琐又容易出错,利用事件冒泡,在ul去监听事件,li产生事件往上冒泡时去捕获,利用e.target来判断是否为我们的目标元素,是的话就可以做相应操作了。
请解释JavaScript中this是如何工作的。作为独立函数的调用
function func(){ console.log(this); } func(); //Window
全局作用域中声明一个函数,并调用它,此时函数中的this指向全局对象。
作为对象方法调用
function say(){ console.log(this); } var obj = { name: "f2er", say: say }; obj.say(); //Object {name: "f2er"}
当函数作为一个对象的方法调用时,函数中的this绑定到了这个对象。
使用call或apply来调用函数
function func(){ console.log(this); } var obj = { name:"f2er" }; func.call(obj); //Object {name: "f2er"} func.apply(obj); //Object {name: "f2er"}
当使用call()或apply()函数进行函数调用时,传入参数对象的将被设置为函数体内this的值,这两个函数都是设置调用函数体内的this值的,且第一个参数都为this,区别是第二个参数apply()是一个参数arguments(类数组对象),而call(),传递给他的是一系列参数。
new来调用函数
function F2er(name){ this.name = name; console.log(this); } var f2er = new F2er("f2er"); // F2er {name: "f2er"}
当使用new来调用一个函数时,会创建一个新的对象,然后绑定到Dog()调用中的this。
请解释原型继承(prototypal inheritance)的原理。先上一个例子:
function Super(){ this.superValue = "super"; } Super.prototype.getSuperValue = function (){ return this.superValue; } function Sub(){ this.subValue = "sub"; } var superInstance = new Super(); Sub.prototype = superInstance; Sub.prototype.getSubValue = function (){ return this.subValue; } var instance = new Sub(); console.log(instance.getSuperValue()); // super
每个函数Sub都有一个属性prototype,prototype指向一个原型对象,原型对象中也有一个指向函数的属性constructor,通过new一个函数Sub可以产生实例instance,调用这个instance的某个属性或方法时,instance会先查找自身是否有这个方法或者属性,没有的话就会去实例的构造函数Sub的原型prototype中查找,即Sub.prototype,如果给原型对象Sub.prototype赋予另一个类型的实例superInstance,则是在superInstance中查找的,这个superInstance中也有属性prototype指向某个原型对象,以此一级级往上最终到Object.prototype,这样就形成了原型继承。
利用此原理可以自己实现一个inherits函数:
function inherits(subType, superType){ var _prototype = Object.create(superType.prototype); _prototype.constructor = subType; subType.prototype = _prototype; }IIFE(立即调用的函数表达式)是什么?有什么作用?
(function fn(){..})(),函数被包含在一个括号内,变成为一个表达式,随后跟着一个(),就立即执行这个函数,
这种模式就是立即执行函数表达式(Immediately Invoked Function Expression),简称IIFE。
也有用(function fn(){..}())后面的括号在前面的括号内这种形式表示的,这两种形式在功能上都是一致的。
IIFE的一些作用:
创建作用域,内部保存一些大量临时变量的代码防止命名冲突。
一些库的外层用这种形式包起来防止作用域污染。
运行一些只执行一次的代码。
(function(){ var module = require("module"); module.setup(); module.run(); })();
用闭包保存状态
以下点击页面标签的时候,实际并不是弹出每个具体的i的,而是elems.length,因为每个a监听器中引用的i都是同一个作用域的。
var elems = document.getElementsByTagName("a"); for (var i = 0; i < elems.length; i++) { elems[i].addEventListener("click", function (e) { e.preventDefault(); alert("I am link #" + i); }, "false"); }
以下点击页面标签的时候,每一个i传入一个IIFE,IIFE形成多带带一个作用域保存了当时的i值,所以点击a标签,可以弹出不同的i值。
var elems = document.getElementsByTagName("a"); for (var i = 0; i < elems.length; i++) { (function (lockedInIndex) { elems[i].addEventListener("click", function (e) { e.preventDefault(); alert("I am link #" + lockedInIndex); }, "false"); })(i); }什么是闭包(closure),有什么作用?
当某个函数调用时会创建一个执行环境以及作用域链,然后根据arguments和其它命名参数初始化形成活动对象。在外部函数调用结束后,其执行环境与作用域链被销毁,但是其活动对象保存在了闭包之中,最后在闭包函数调用结束后才销毁。简单的说,闭包就是能够读取其他函数内部变量的函数。在js中,闭包是指有权访问另一个函数作用域中的变量的函数。
闭包的作用匿名自执行函数
有的场景下函数只需要执行一次,例如init()之类的函数,其内部变量无需维护,我们可以使用闭包。 我们创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在函数执行完后会立刻释放资源,而且不污染全局对象。
封装
模拟面向对象的代码风格进行封装,使私有属性存在成为可能。
缺点常驻内存,会增大内存使用量,易造成内存泄露
请指出JavaScript宿主对象和原生对象的区别?宿主对象是指DOM和BOM。
原生对象是Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等对象。
请指出以下代码的区别:function Person(){}、var person = Person()、var person = new Person()?function Person(){}
声明一个函数Person()。
var person = Person()
将函数Person()的结果返回给变量person,如果没有返回值则person为undefined。
var person = new Person()
new一个Person的实例对象。
.call和.apply的区别是什么?.call和.apply的共同点是都是用来改变函数体内this对象的值。
区别是第二个参数不一样。apply()的第二个参数是一个类数组对象arguments,参数都是以数组的形式传入,而call(),传递给他的是一系列参数。例如
Math.max.call(null, 1, 2, 3, 4); //4 Math.max.apply(null, [1, 2, 3, 4]); //4请解释Function.prototype.bind
Function.prototype.bind方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.
Function.prototype.bind的实现类似于:
Function.prototype.bind = function (scope) { var fn = this; return function () { return fn.apply(scope, arguments); }; }
Function.prototype.bind的作用
创建绑定函数
一些函数的参数常常也是函数,给当做参数的函数绑定this值确保参数函数执行时有正确的this指向。
Ajax的工作原理原理Ajax是无需刷新页面就能从服务器取得数据的一种方法。
Ajax通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM更新页面。
过程创建XMLHttpRequest对象。
设置响应HTTP请求的回调函数。
创建一个HTTP请求,指定相应的请求方法、url等。
发送HTTP请求。
获取服务器端返回的数据。
使用JavaScript操作DOM更新页面。
缺点对搜索引擎不友好
要实现Ajax下的前后退功能成本较大
跨域问题限制
JSONP的工作原理JSONP(JSON with Padding)是一种非官方跨域数据交互协议,它允许在服务器端集成标签返回至客户端,通过javascript回调的形式实现跨域访问。
因为同源策略的原因,我们不能使用XMLHttpRequest与外部服务器进行通信,但是可以访问外部资源,所以通过JSON与相结合的办法,可以绕过同源策略从外部服务器直接取得可执行的JavaScript函数。
原理客户端定义一个函数,比如jsonpCallback,然后创建,src为url + ?jsonp=jsonpCallback这样的形式,之后服务器会生成一个和传递过来jsonpCallback一样名字的参数,并把需要传递的数据当做参数传入,比如jsonpCallback(json),然后返回给客户端,此时客户端就执行了这个服务器端返回的jsonpCallback(json)回调。
通俗的说,就是客户端定义一个函数然后请求,服务器端返回的javascript内容就是调用这个函数,需要的数据都当做参数传入这个函数了。
优点 - 兼容性好,简单易用,支持浏览器与服务器双向通信
缺点 - 只支持GET请求;存在脚本注入以及跨站请求伪造等安全问题
补充一点,JSONP不使用XMLHttpRequest对象加载资源,不属于真正意义上的AJAX。
变量声明提升(hoisting)变量的声明前置就是把变量的声明提升到当前作用域的最前面。
函数的声明前置就是把整个函数提升到当前作用域的最前面(位于前置的变量声明后面)。
//变量的声明前置 console.log(num);//undefined var num = 1; 等价于 //变量的声明前置 var num; console.log(num);//undefined num = 1;
//函数的声明前置 var num = 1; console.log(doubleNum(num));//2 function doubleNum(num){ return num*2; } 等价于 //函数的声明前置 var num; function doubleNum(num){ return num*2; } num = 1; console.log(doubleNum(num));//2事件冒泡机制(event bubbling)
事件冒泡(event bubbling),事件最开始时由触发的那个元素身上发生,然后沿着DOM树向上传播,直到document对象。如果想阻止事件起泡,可以使用e.stopPropagation()。
JavaScript的同源策略目的同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式。同源指的是协议、域名、端口相同,同源策略是一种安全协议。
同源策略保证了用户的信息安全,浏览器打开多个站点时,互相之间不能利用JavaScript获取对方站点的敏感信息。
一些跨域技术JSONP
CORS
修改document.domain来进行跨域
使用window.name来进行跨域
使用window.postMessage来进行跨域
什么是"use strict"?使用它的好处和坏处分别是什么?优点在所有语句之前放一个特定语句"use strict",就会为整个script标签开启严格模式。
消除Javascript语法的一些不严谨之处,减少一些怪异行为;
消除代码运行的一些不安全之处,保证代码运行的安全;
提高编译器效率,增加运行速度;
为未来新版本的Javascript做好铺垫。
缺点严格模式改变了语义。依赖这些改变可能会导致没有实现严格模式的浏览器中出现问题或者错误。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87770.html
摘要:手把手教你做个人火的时候,随便一个都能赚的盆满钵满,但是,个人没有服务端,没有美工,似乎就不能开发了,真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程,全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖 flash。...
摘要:我对知乎前端相关问题的十问十答张鑫旭张鑫旭大神对知乎上经典的个前端问题的回答。作者对如何避免常见的错误,难以发现的问题,以及性能问题和不好的实践给出了相应的建议。但并不是本身有问题,被标准定义的是极好的。 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。 不论你是javascript新手还是老...
阅读 825·2021-09-22 15:17
阅读 1871·2021-09-22 15:06
阅读 2152·2021-09-08 09:35
阅读 5041·2021-09-01 11:43
阅读 3427·2019-08-30 15:55
阅读 2135·2019-08-30 12:48
阅读 3132·2019-08-30 12:45
阅读 1762·2019-08-29 17:31