摘要:在运行这一行之后,也指向这显然会导致继承链的紊乱明明是用构造函数生成的,因此我们必须手动纠正,将对象的值改为。下文都遵循这一点,即如果替换了对象,那么,下一步必然是为新的对象加上属性,并将这个属性指回原来的构造函数。
express&koa
面试题目:1.express和koa的对比,两者中间件的原理,koa捕获异常多种情况说一下
参考:https://blog.csdn.net/shmnh/a...
https://blog.csdn.net/K616358...
https://blog.csdn.net/wang839...
async 函数:http://www.ruanyifeng.com/blo...
express:
var express = require("express") var app = express() //创建一个APP实例 //建一个项目根目录的get请求路由,回调方法中直接输出字符串Hello World! app.get("/", function (req, res) { res.send("Hello World!") }); //监听端口,启动服务 app.listen(3000);
koa:
var koa = require("koa"); var route = require("koa-route"); //koa默认没有集成route功能,引入中间件 var app = koa(); //创建一个APP实例 //建一个项目根目录的get请求路由,回调方法中直接输出字符串Hello World!,就是挂载一个中间件 app.use(route.get("/", function *(){ this.body = "Hello World"; })); //监听端口,启动服务 app.listen(3000);启动方式
koa采用了new Koa()的方式,而express采用传统的函数形式,对比源码如下:
//koa const Emitter = require("events"); module.exports = class Application extends Emitter { ... } //express exports = module.exports = createApplication; function createApplication() { ... }应用生命周期和上下文
在项目过程中,经常需要用到在整个应用生命周期中共享的配置和数据对象,比如服务URL、是否启用某个功能特性、接口配置、当前登录用户数据等等。
express:
//共享配置,express提供了很多便利的方法 app.set("enableCache", true) app.get("enableCache")//true app.disable("cache") app.disabled("cache")//true app.enable("cache") app.enabled("cache")//true //应用共享数据:app.locals app.locals.user = {name:"Samoay", id:1234};
koa:
//配置,直接使用koa context即可 app.enableCache = true; app.use(function *(next){ console.log(this.app.enableCache); //true this.app.enableCache = false; //just use this this.staticPath = "static"; yield *next; }); //应用共享数据:ctx.state this.state.user = {name:"Samoay", id:1234};请求HTTP Request
服务器端需要进行什么处理,怎么处理以及处理的参数都依赖客户端发送的请求,两个框架都封装了HTTP Request对象,便于对这一部分进行处理。以下主要举例说明下对请求参数的处理。GET参数都可以直接通过Request对象获取,POST参数都需要引入中间件先parse,再取值。
express:
// 获取QueryString参数 // GET /shoes?order=desc&shoe[color]=blue req.query.order // => "desc" req.query.shoe.color // => "blue" // 通过路由获取Restful风格的URL参数 app.get("/user/:id?", function userIdHandler(req, res) { console.log(req.params.id); res.send("GET"); }) //获取POST数据:需要body-parser中间件 var bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: true })); app.post("/", function (req, res) { console.log(req.body); res.json(req.body);
koa:
// 获取QueryString参数 // GET /?action=delete&id=1234 this.request.query // => { action: "delete", id: "1234" } // 通过路由获取Restful风格的URL参数 var route = require("koa-route"); app.use(route.get("/post/:id", function *(id){ console.log(id); // => 1234 })); // 获取POST数据:需要co-body中间件 // Content-Type: application/x-www-form-urlencoded // title=Test&content=This+is+a+test+post var parse = require("co-body"); app.use(route.post("/post/new", function *(){ var post = yield parse(this.request);//this console.log(post); // => { title: "Test", content: "This is a test post" } }));路由Route
收到客户端的请求,服务需要通过识别请求的方法(HTTP Method: GET, POST, PUT...)和请求的具体路径(path)来进行不同的处理。这部分功能就是路由(Route)需要做的事情,说白了就是请求的分发,分发到不同的回调方法去处理。
express
// app.all表示对所有的路径和请求方式都要经过这些回调方法的处理,可以逗号方式传入多个 app.all("*", authentication, loadUser); // 也可以多次调用 app.all("*", requireAuthentication) app.all("*", loadUser); // 也可以针对某具体路径下面的所有请求 app.all("/api/*", requireAuthentication); // app.get GET方式的请求 app.get("/user/:id", function(req, res) { res.send("user " + req.params.id); }); // app.post POST方式的请求 app.post("/user/create", function(req, res) { res.send("create new user"); });
这里需要说明2个问题,首先是app.get,在应用生命周期中也有一个app.get方法,用于获取项目配置。Express内部就是公用的一个方法,如果传入的只有1个参数就获取配置,2个参数就作为路由处理。其次是app.use("", cb) 与app.all("", cb) 的区别,前者是中间件方式,调用是有顺序的,不一定会执行到;后者是路由方式,肯定会执行到。
koa
// Koa // 和Express不同,koa需要先引入route中间件 var route = require("koa-route"); //引入中间件之后支持的写法差不多,只是路径传入route,然后把route作为中间件挂载到app app.use(route.get("/", list)); app.use(route.get("/post/new", add)); app.use(route.get("/post/:id", show)); app.use(route.post("/post", create)); //链式写法 var router = require("koa-router")(); router.get("/", list) .get("/post/new", add) .get("/post/:id", show) .post("/post", create); app.use(router.routes()) .use(router.allowedMethods());视图view
Express框架自身集成了视图功能,提供了consolidate.js功能,可以是有几乎所有Javascript模板引擎,并提供了视图设置的便利方法。Koa需要引入co-views中间件,co-views也是基于consolidate.js,支持能力一样强大。
express
// Express // 这只模板路径和默认的模板后缀 app.set("views", __dirname + "/tpls"); app.set("view engine", "html"); //默认,express根据template的后缀自动选择模板 //引擎渲染,支持jade和ejs。如果不使用默认扩展名 app.engine(ext, callback) app.engine("html", require("ejs").renderFile); //如果模板引擎不支持(path, options, callback) var engines = require("consolidate"); app.engine("html", engines.handlebars); app.engine("tpl", engines.underscore); app.get("list", function(res, req){ res.render("list", {data}); });
koa
//需要引入co-views中间件 var views = require("co-views"); var render = views("tpls", { map: { html: "swig" },//html后缀使用引擎 default: "jade"//render不提供后缀名时 }); var userInfo = { name: "tobi", species: "ferret" }; var html; html = render("user", { user: userInfo }); html = render("user.jade", { user: userInfo }); html = render("user.ejs", { user: userInfo });返回HTTP Response
获取完请求参数、处理好了具体的请求、视图也准备就绪,下面就该返回给客户端了,那就是HTTP Response对象了。这部分也属于框架的基础部分,各种都做了封装实现,显著的区别是koa直接将输出绑定到了ctx.body属性上,另外输出JSON或JSONP需要引入中间件。
express
//输出普通的html res.render("tplName", {data}); //输出JSON res.jsonp({ user: "Samoay" }); // => { "user": "Samoay" } //输出JSONP ?callback=foo res.jsonp({ user: "Samoay" }); // => foo({ "user": "Samoay" }); //res.send([body]); res.send(new Buffer("whoop")); res.send({ some: "json" }); res.send("some html
"); //设定HTTP Status状态码 res.status(200);
koa
app.use(route.get("/post/update/:id", function *(id){ this.status = 404; this.body = "Page Not Found"; })); var views = require("co-views"); var render = views("tpls", { default: "jade"//render不提供后缀名时 }); app.use(route.get("/post/:id", function *(id){ var post = getPost(id); this.status = 200;//by default, optional this.body = yield render("user", post); })); //JSON var json = require("koa-json"); app.use(route.get("/post/:id", function *(id){ this.body = {id:1234, title:"Test post", content:"..."}; }));中间件 Middleware
对比了主要的几个框架功能方面的使用,其实区别最大,使用方式最不同的地方是在中间件的处理上。Express由于是在ES6特性之前的,中间件的基础原理还是callback方式的;而koa得益于generator特性和co框架(co会把所有generator的返回封装成为Promise对象),使得中间件的编写更加优雅。
express
// req 用于获取请求信息, ServerRequest 的实例 // res 用于响应处理结果, ServerResponse 的实例 // next() 函数用于将当前控制权转交给下一步处理, // 如果给 next() 传递一个参数时,表示出错信息 var x = function (req, res, next) { // 对req和res进行必要的处理 // 进入下一个中间件 return next(); // 传递错误信息到下一个中间件 return next(err); // 直接输出,不再进入后面的中间件 return res.send("show page"); };
koa
// koa 一切都在ctx对象上+generator app.use(function *(){ this; // is the Context this.request; // is a koa Request this.response; // is a koa Response this.req;// is node js request this.res;// is node js response //不再进入后面的中间件, 回溯upstream return; });
express处理多个中间件:
const app = require("express")(); app.use((req,res,next)=>{ console.log("first"); //next(); }); app.use((req,res,next)=>{ console.log("second"); //next(); }); app.use((req,res,next)=>{ console.log("third"); res.status(200).send("headers ...
"); }); app.listen(3001);
koa处理多个中间件:
const Koa = require("koa"); const app = new Koa(); app.use((ctx,next) => { ctx.body = "Hello Koa-1"; next(); }); app.use((ctx,next) => { ctx.body = "Hello Koa-2"; next(); }); app.use((ctx,next) => { ctx.body = "Hello Koa-3"; next(); }); app.listen(3000); /*与express类似,koa中间件的入参也有两个, 后一个就是next。next的功能与express一样*/ /*上面介绍了koa的next()的功能,这里的next()需要同步调用,千万不要采用异步调用 */koa捕获异常
异常捕获
const http = require("http"); const https = require("https"); const Koa = require("koa"); const app = new Koa(); app.use((ctx)=>{ str="hello koa2";//沒有声明变量 ctx.body=str; }) app.on("error",(err,ctx)=>{//捕获异常记录错误日志 console.log(new Date(),":",err); }); http.createServer(app.callback()).listen(3000);
上面的代码运行后在浏览器访问返回的结果是“Internal Server error”;我们发现当错误发生的时候后端程序并没有死掉,只是抛出了异常,前端也同时接收到了错误反馈,对于KOA来说,异常发生在中间件的执行过程中,所以只要我们在中间件执行过程中将异常捕获并处理就OK了。
添加中间键use方法
use(fn) { if (typeof fn !== "function") throw new TypeError("middleware must be a function!"); if (isGeneratorFunction(fn)) { deprecate("Support for generators will be removed in v3. " + "See the documentation for examples of how to convert old middleware " + "https://github.com/koajs/koa/blob/master/docs/migration.md"); fn = convert(fn); } debug("use %s", fn._name || fn.name || "-"); this.middleware.push(fn); return this; } /*fn可以是三种类型的函数,普通函数,generator函数, 还有async函数。最后generator会被转成async函数,。 所以最终中间件数组只会有普通函数和async函数。*/
异常处理
当异常捕获是有两种处理方式,一种就是响应错误请求,而就是触发注册注册全局错误事件,比如记录错误日志
async 函数一句话,async 函数就是 Generator 函数的语法糖。
前文有一个 Generator 函数,依次读取两个文件:
var fs = require("fs"); var readFile = function (fileName){ return new Promise(function (resolve, reject){ fs.readFile(fileName, function(error, data){ if (error) reject(error); resolve(data); }); }); }; var gen = function* (){ var f1 = yield readFile("/etc/fstab"); var f2 = yield readFile("/etc/shells"); console.log(f1.toString()); console.log(f2.toString()); };
写成 async 函数,就是下面这样:
var asyncReadFile = async function (){ var f1 = await readFile("/etc/fstab"); var f2 = await readFile("/etc/shells"); console.log(f1.toString()); console.log(f2.toString()); };
一比较就会发现,async 函数就是将 Generator 函数的星号(*)替换成 async,将 yield 替换成 await,仅此而已。
async 函数的优点
(1)内置执行器。 Generator 函数的执行必须靠执行器,所以才有了 co 函数库,而 async 函数自带执行器。也就是说,async 函数的执行,与普通函数一模一样,只要一行。
var result = asyncReadFile();
(2)更好的语义。 async 和 await,比起星号和 yield,语义更清楚了。async 表示函数里有异步操作,await 表示紧跟在后面的表达式需要等待结果。
(3)更广的适用性。 co 函数库约定,yield 命令后面只能是 Thunk 函数或 Promise 对象,而 async 函数的 await 命令后面,可以跟 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。
async 函数的实现
async 函数的实现,就是将 Generator 函数和自动执行器,包装在一个函数里。
async function fn(args){ // ... } // 等同于 function fn(args){ return spawn(function*() { // ... }); }
所有的 async 函数都可以写成上面的第二种形式,其中的 spawn 函数就是自动执行器。
async 函数的用法
同 Generator 函数一样,async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。
async function getStockPriceByName(name) { var symbol = await getStockSymbol(name); var stockPrice = await getStockPrice(symbol); return stockPrice; } getStockPriceByName("goog").then(function (result){ console.log(result); });
上面代码是一个获取股票报价的函数,函数前面的async关键字,表明该函数内部有异步操作。调用该函数时,会立即返回一个Promise对象。
指定多少毫秒后输出一个值:
function timeout(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } async function asyncPrint(value, ms) { await timeout(ms); console.log(value) } asyncPrint("hello world", 50);
await 命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中。
async function myFunction() { try { await somethingThatReturnsAPromise(); } catch (err) { console.log(err); } } // 另一种写法 async function myFunction() { await somethingThatReturnsAPromise().catch(function (err){ console.log(err); }); }
await 命令只能用在 async 函数之中,如果用在普通函数,就会报错。但是,如果将 forEach 方法的参数改成 async 函数,也有问题。
async function dbFuc(db) { let docs = [{}, {}, {}]; // 可能得到错误结果 docs.forEach(async function (doc) { await db.post(doc); }); } //上面代码可能不会正常工作,原因是这时三个 db.post 操作将是并发执行, //也就是同时执行,而不是继发执行。正确的写法是采用 for 循环。 async function dbFuc(db) { let docs = [{}, {}, {}]; for (let doc of docs) { await db.post(doc); } }
如果确实希望多个请求并发执行,可以使用 Promise.all 方法。
async function dbFuc(db) { let docs = [{}, {}, {}]; let promises = docs.map((doc) => db.post(doc)); let results = await Promise.all(promises); console.log(results); } // 或者使用下面的写法 async function dbFuc(db) { let docs = [{}, {}, {}]; let promises = docs.map((doc) => db.post(doc)); let results = []; for (let promise of promises) { results.push(await promise); } console.log(results); }
promise: https://segmentfault.com/n/13...
JS的继承面试题目:9.js的继承
参考:http://www.ruanyifeng.com/blo...
构造函数的继承例子:
function Animal(){ this.species = "动物"; } function Cat(name,color){ this.name = name; this.color = color; }
一、 构造函数绑定
第一种方法也是最简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:
function Cat(name,color){ Animal.apply(this, arguments); this.name = name; this.color = color; } var cat1 = new Cat("大毛","黄色"); alert(cat1.species); // 动物
二、 prototype模式
如果"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了
//将Cat的prototype对象指向一个Animal的实例 //它相当于完全删除了prototype 对象原先的值,然后赋予一个新值。 Cat.prototype = new Animal(); //任何一个prototype对象都有一个constructor属性,指向它的构造函数。 //如果没有"Cat.prototype = new Animal(); //"这一行,Cat.prototype.constructor是指向Cat的; //加了这一行以后,Cat.prototype.constructor指向Animal。 Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛","黄色"); alert(cat1.species); // 动物 alert(Cat.prototype.constructor == Animal); //true //每一个实例也有一个constructor属性, //默认调用prototype对象的constructor属性。 alert(cat1.constructor == Cat.prototype.constructor); // true //在运行"Cat.prototype = new Animal();"这一行之后, //cat1.constructor也指向Animal! alert(cat1.constructor == Animal); // true //这显然会导致继承链的紊乱(cat1明明是用构造函数Cat生成的),因此我们必须 //手动纠正,将Cat.prototype对象的constructor值改为Cat。 //这就是第二行的意思。
这是很重要的一点,编程时务必要遵守。下文都遵循这一点,即如果替换了prototype对象,那么,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。
o.prototype = {}; o.prototype.constructor = o;
三、 直接继承prototype
由于Animal对象中,不变的属性都可以直接写入Animal.prototype。所以,我们也可以让Cat()跳过 Animal(),直接继承Animal.prototype。
先将Animal对象改写:
function Animal(){ } Animal.prototype.species = "动物";
然后,将Cat的prototype对象,然后指向Animal的prototype对象,这样就完成了继承。
Cat.prototype = Animal.prototype; Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛","黄色"); alert(cat1.species); // 动物
这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。
Cat.prototype.constructor = Cat; // 这一句实际上把Animal.prototype对象的constructor属性也改掉了! alert(Animal.prototype.constructor); // Cat
四、 利用空对象作为中介
var F = function(){}; F.prototype = Animal.prototype; Cat.prototype = new F(); Cat.prototype.constructor = Cat;
F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。
alert(Animal.prototype.constructor); // Animal
将上面的方法,封装成一个函数,便于使用。
function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prototype; } //意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。 //(uber是一个德语词,意思是"向上"、"上一层"。)这等于在子对象上打开一条通道, //可以直接调用父对象的方法。这一行放在这里,只是为了实现继承的完备性,纯属备用性质。
使用的时候,方法如下
extend(Cat,Animal); var cat1 = new Cat("大毛","黄色"); alert(cat1.species); // 动物
五、 拷贝继承
上面是采用prototype对象,实现继承。我们也可以换一种思路,纯粹采用"拷贝"方法实现继承。简单说,把父对象的所有属性和方法,拷贝进子对象
function Animal(){} Animal.prototype.species = "动物";
实现属性拷贝的目的:
function extend2(Child, Parent) { var p = Parent.prototype; var c = Child.prototype; for (var i in p) { c[i] = p[i]; } c.uber = p; //这个函数的作用,就是将父对象的prototype对象中的属性,一一拷贝给Child //对象的prototype对象。 }
使用的时候,这样写:
extend2(Cat, Animal); var cat1 = new Cat("大毛","黄色"); alert(cat1.species); // 动物非构造函数的继承
例子:
var Chinese = { nation:"中国" };
var Doctor ={ career:"医生" }
这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。
object()方法
function object(o) { function F() {} F.prototype = o; return new F(); } //这个object()函数,其实只做一件事,就是把子对象的prototype属性, //指向父对象,从而使得子对象与父对象连在一起。
使用的时候,第一步先在父对象的基础上,生成子对象:
var Doctor = object(Chinese);
然后,再加上子对象本身的属性:
Doctor.career = "医生";
这时,子对象已经继承了父对象的属性了
alert(Doctor.nation); //中国
浅拷贝
除了使用"prototype链"以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。
function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } c.uber = p; return c; }
使用的时候,这样写:
var Doctor = extendCopy(Chinese); Doctor.career = "医生"; alert(Doctor.nation); // 中国
但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。
//现在给Chinese添加一个"出生地"属性,它的值是一个数组。 Chinese.birthPlaces = ["北京","上海","香港"]; //然后,我们为Doctor的"出生地"添加一个城市: Doctor.birthPlaces.push("厦门"); //Chinese的"出生地"也被改掉了 alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门
extendCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。
深拷贝
所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。
function deepCopy(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === "object") { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c; }
使用的时候这样写:
var Doctor = deepCopy(Chinese,Doctor);
现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性
Chinese.birthPlaces = ["北京","上海","香港"]; Doctor.birthPlaces.push("厦门"); alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 alert(Chinese.birthPlaces); //北京, 上海, 香港call和apply的区别
面试题:10.call和apply的区别
参考: http://www.ruanyifeng.com/blo...
https://www.jianshu.com/p/bc5...
this是 JavaScript 语言的一个关键字。
它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。
情况一:纯粹的函数调用
这是函数的最通常用法,属于全局性调用,因此this就代表全局对象。
var x = 1; function test() { console.log(this.x); } test(); // 1
情况二:作为对象方法的调用
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
function test() { console.log(this.x); } var obj = {}; obj.x = 1; obj.m = test; obj.m(); // 1
情况三 作为构造函数调用
所谓构造函数,就是通过这个函数,可以生成一个新对象。这时,this就指这个新对象。
function test() { this.x = 1; } var obj = new test(); obj.x // 1 //为了表明这时this不是全局对象,我们对代码做一些改变 var x = 2; function test() { this.x = 1; } var obj = new test(); x // 2 //运行结果为2,表明全局变量x的值根本没变。
情况四 apply 调用
apply()是函数的一个方法,作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此,这时this指的就是这第一个参数。
var x = 0; function test() { console.log(this.x); } var obj = {}; obj.x = 1; obj.m = test; obj.m.apply() // 0 //如果把最后一行代码修改为 obj.m.apply(obj); //1call
call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表。当第一个参数为null、undefined的时候,默认指向window。
var arr = [1, 2, 3, 89, 46] var max = Math.max.call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89
例子:
var obj = { message: "My name is: " } function getName(firstName, lastName) { console.log(this.message + firstName + " " + lastName) } getName.call(obj, "Dot", "Dolby")apply
apply接受两个参数,第一个参数是要绑定给this的值,第二个参数是一个参数数组。当第一个参数为null、undefined的时候,默认指向window。
var arr = [1,2,3,89,46] var max = Math.max.apply(null,arr)//89
当函数需要传递多个变量时, apply 可以接受一个数组作为参数输入, call 则是接受一系列的多带带变量。
例子:
var obj = { message: "My name is: " } function getName(firstName, lastName) { console.log(this.message + firstName + " " + lastName) } getName.apply(obj, ["Dot", "Dolby"])// My name is: Dot Dolby
call和apply可用来借用别的对象的方法,这里以call()为例:
var Person1 = function () { this.name = "Dot"; } var Person2 = function () { this.getname = function () { console.log(this.name); } Person1.call(this); } var person = new Person2(); person.getname(); // Dotbind
和call很相似,第一个参数是this的指向,从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。
var obj = { name: "Dot" } function printName() { console.log(this.name) } var dot = printName.bind(obj) console.log(dot) // function () { … } dot() // Dot //bind 方法不会立即执行,而是返回一个改变了上下文 this 后的函数。 //而原函数printName 中的 this 并没有被改变,依旧指向全局对象 window。
参数的使用
function fn(a, b, c) { console.log(a, b, c); } var fn1 = fn.bind(null, "Dot"); fn("A", "B", "C"); // A B C fn1("A", "B", "C"); // Dot A B fn1("B", "C"); // Dot B C fn.call(null, "Dot"); // Dot undefined undefined //call 是把第二个及以后的参数作为 fn 方法的实参传进去, //而 fn1 方法的实参实则是在 bind 中参数的基础上再往后排。应用场景
求数组中的最大和最小值
var arr = [1,2,3,89,46] var max = Math.max.apply(null,arr)//89 var min = Math.min.apply(null,arr)//1
将类数组转化为数组
var trueArr = Array.prototype.slice.call(arrayLike)
数组追加
var arr1 = [1,2,3]; var arr2 = [4,5,6]; var total = [].push.apply(arr1, arr2);//6 // arr1 [1, 2, 3, 4, 5, 6] // arr2 [4,5,6]
判断变量类型
function isArray(obj){ return Object.prototype.toString.call(obj) == "[object Array]"; } isArray([]) // true isArray("dot") // false
利用call和apply做继承
function Person(name,age){ // 这里的this都指向实例 this.name = name this.age = age this.sayAge = function(){ console.log(this.age) } } function Female(){ Person.apply(this,arguments)//将父元素所有方法在这里执行一遍就继承了 } var dot = new Female("Dot",2)
使用 log 代理 console.log
function log(){ console.log.apply(console, arguments); } // 当然也有更方便的 var log = console.log()call、apply和bind函数存在的区别
bind返回对应函数, 便于稍后调用; apply, call则是立即调用。
除此外, 在 ES6 的箭头函数下, call 和 apply 将失效, 对于箭头函数来说:
箭头函数体内的 this 对象, 就是定义时所在的对象, 而不是使用时所在的对象;所以不需要类似于var _this = this这种丑陋的写法
箭头函数不可以当作构造函数,也就是说不可以使用 new 命令, 否则会抛出一个错误
箭头函数不可以使用 arguments 对象,,该对象在函数体内不存在. 如果要用, 可以用 Rest 参数代替
不可以使用 yield 命令, 因此箭头函数不能用作 Generator 函数
面试题: 11.ajax是同步还是异步,怎么样实现同步;12.ajax实现过程
参考: https://blog.csdn.net/qq_2956...
https://blog.csdn.net/xxf1597...
Ajax全称Asynchronous JavaScript and XML,也就是异步的js和XML技术。
Ajax的使用四大步骤详解第一步,创建xmlhttprequest对象
var xmlhttp =new XMLHttpRequest(); //XMLHttpRequest对象用来和服务器交换数据。
var xhttp; if(window.XMLHttpRequest) { //现代主流浏览器 xhttp= new XMLHttpRequest(); }else{ //针对浏览器,比如IE5或IE6 xhttp= new ActiveXObject("Microsoft.XMLHTTP"); }
第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)
xhttp.send();使用get方法发送请求到服务器。
xhttp.send(string);使用post方法发送请求到服务器。
post 发送请求什么时候能够使用呢?
(1)更新一个文件或者数据库的时候。
(2)发送大量数据到服务器,因为post请求没有字符限制。
(3)发送用户输入的加密数据。
get例子:
xhttp.open("GET","ajax_info.txt",true); xhttp.open("GET","index.html",true); xhttp.open("GET","demo_get.asp?t="+ Math.random(), true);xhttp.send();
post例子
xhttp.open("POST", "demo_post.asp", true); xhttp.send();
post表单例子
post表单数据需要使用xmlhttprequest对象的setRequestHeader方法增加一个HTTP头。
xhttp.open("POST","ajax_test.aspx",true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Henry&lname=Ford");
async=true 当服务器准备响应时将执行onreadystatechange函数。
xhttp.onreadystatechange= function(){ if(xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("demo").innerHTML=xhttp.responseText; } }; xhttp.open("GET", "index.aspx",true); xhttp.send();
asyn=false 则将不需要写onreadystatechange函数,直接在send后面写上执行代码。
xhttp.open("GET", "index.aspx", false); xhttp.send(); document.getElementById("demo").innerHTML = xhttp.responseText;
第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
使用responseText属性得到服务器响应的字符串数据,使用responseXML属性得到服务器响应的XML数据。
例子如下:
document.getElementById("demo").innerHTML = xhttp.responseText; //服务器响应的XML数据需要使用XML对象进行转换。 xmlDoc= xhttp.responseXML; txt= ""; x= xmlDoc.getElementsByTagName("ARTIST"); for(i = 0; i < x.length; i++) { txt+= x[i].childNodes[0].nodeValue + "
"; } document.getElementById("demo").innerHTML= txt;
第四步,onreadystatechange函数
当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。
readyState属性,XMLHttpRequest对象的状态,改变从0到4,0代表请求未被初始化,1代表服务器连接成功,2请求被服务器接收,3处理请求,4请求完成并且响应准备。
status属性,200表示成功响应,404表示页面不存在。
在onreadystatechange事件中,服务器响应准备的时候发生,当readyState==4和status==200的时候服务器响应准备。
步骤总结创建XMLHttpRequest对象,也就是创建一个异步调用对象.
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
设置响应HTTP请求状态变化的函数.
发送HTTP请求.
获取异步调用返回的数据.
使用JavaScript和DOM实现局部刷新.
AJAX中根据async的值不同分为同步(async = false)和异步(async = true)两种执行方式
$.ajax({ type: "post", url: "path", cache:false, async:false, dataType: ($.browser.msie) ? "text" : "xml", success: function(xmlobj){ function1(){}; } }); function2(){};
一.什么是同步请求:(false)
同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,前一个人办理完自己的事务,下一个人才能接着办。也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态(即当ajax返回数据后,才执行后面的function2)。
二.什么是异步请求:(true)
异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。
同步适用于一些什么情况呢?
我们可以想一下,同步是一步一步来操作,等待请求返回的数据,再执行下一步,那么一定会有一些情况,只有这一步执行完,拿到数据,通过获取到这一步的数据来执行下一步的操作。这是异步没有办法实现的,因此同步的存在一定有他存在的道理。
我们在发送AJAX请求后,还需要继续处理服务器的响应结果,如果这时我们使用异步请求模式同时未将结果的处理交由另一个JS函数进行处理。这时就有可能发生这种情况:异步请求的响应还没有到达,函数已经执行完了return语句了,这时将导致return的结果为空字符串。
面试题:13.闭包的作用理解,以及那些地方用过闭包,以及闭包的缺点,如何实现闭包
参考:https://segmentfault.com/a/11...
变量的作用域
变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。
var n=999; function f1(){ alert(n); } f1(); // 999 //另一方面,在函数外部自然无法读取函数内的局部变量。 function f1(){ var n=999; } alert(n); // error //这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!
从外部读取局部变量
function f1(){ var n=999; function f2(){ alert(n); // 999 } } /*在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量, 对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。*/ /*这就是Javascript语言特有的"链式作用域"结构(chain scope), 子对象会一级一级地向上寻找所有父对象的变量。 所以,父对象的所有变量,对子对象都是可见的,反之则不成立。*/
闭包的概念
闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
function f1(){ var n=999; nAdd=function(){n+=1} function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 nAdd(); result(); // 1000
result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。
使用闭包的注意点
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
闭包的使用场景应用场景一:setTimeout
原生的setTimeout有一个缺陷,你传递的第一个函数不能带参数。即
setTimeout(func(parma),1000);
我们就可以用闭包来实现这个效果了
function func(param) { return function() { alert(param); } } var f = func(1) setTimeout(f, 1000);
应用场景二:用闭包模拟私有方法
// 可以减少闭包占用的内存问题,因为没有指向匿名函数的引用。只要函数执行毕,就可以立即销毁其作用域链了 (function(){ function createFunc() { var name = "wheeler"; return function () { return name; } } var nameFunc = createFunc(); var name = nameFunc(); console.log(name); })(); 闭包的应用场景 用闭包模拟私有方法 var returnNum = (function () { var num = 0; function changeNum(value) { num = value; } return { add: function () { changeNum(10); }, delete: function () { changeNum(-10); }, getNum: function () { return num; } } })(); // 闭包 console.log(returnNum.getNum()); returnNum.add(); console.log(returnNum.getNum()); returnNum.delete(); console.log(returnNum.getNum());
应用场景三:缓存
var CacheCount = (function () { var cache = {}; return { getCache: function (key) { if (key in cache) {// 如果结果在缓存中 return cache[key];// 直接返回缓存中的对象 } var newValue = getNewValue(key); // 外部方法,获取缓存 cache[key] = newValue;// 更新缓存 return newValue; } }; })(); console.log(CacheCount.getCache("key1"));
应用场景四:封装
var person = function(){ var name = "default";//变量作用域为函数内部,外部无法访问 return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }(); console.log(person.name);// undefined console.log(person.getName()); person.setName("wheeler"); console.log(person.getName());跨域
面试题:14.跨域方法以及怎么样实现的与原理
参考:http://www.ruanyifeng.com/blo...
https://blog.csdn.net/qq_3409...
https://blog.csdn.net/qq_2860...
http://www.ruanyifeng.com/blo...
所谓"同源"指的是"三个相同"。
协议相同
域名相同
端口相同
举例
http://www.example.com/dir/page.html
这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下:
http://www.example.com/dir2/other.html:同源 http://example.com/dir/other.html:不同源(域名不同) http://v2.www.example.com/dir/other.html:不同源(域名不同) http://www.example.com:81/dir/other.html:不同源(端口不同)
限制范围
目前,如果非同源,共有三种行为受到限制:
Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
AJAX 请求不能发送。
Cookie
Cookie 是服务器写入浏览器的一小段信息,只有同源的网页才能共享。
但是,两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置document.domain共享 Cookie。
举例来说,A网页是http://w1.example.com/a.html,B网页是http://w2.example.com/b.html,那么只要设置相同的document.domain,两个网页就可以共享Cookie。
document.domain = "example.com";
//现在,A网页通过脚本设置一个 Cookie。 document.cookie = "test1=hello"; //B网页就可以读到这个 Cookie。 var allCookie = document.cookie;
注意,这种方法只适用于 Cookie 和 iframe 窗口,LocalStorage 和 IndexDB 无法通过这种方法
另外,服务器也可以在设置Cookie的时候,指定Cookie的所属域名为一级域名,比如.example.com。
Set-Cookie: key=value; domain=.example.com; path=/
iframe
如果两个网页不同源,就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信。
//比如,父窗口运行下面的命令,如果iframe窗口不是同源,就会报错。 document.getElementById("myIFrame").contentWindow.document // Uncaught DOMException: Blocked a frame from accessing a cross-origin frame //子窗口获取主窗口的DOM也会报错。 window.parent.document.body // 报错
如果两个窗口一级域名相同,只是二级域名不同,那么设置上一节介绍的document.domain属性,就可以规避同源政策,拿到DOM。
例子:
/* 1. 在页面 http://a.example.com/a.html 设置document.domain */ /* 2. 在页面http:// b.example.com/b.html 中设置document.domain */
对于完全不同源的网站,目前有三种方法,可以解决跨域窗口的通信问题:
片段识别符(fragment identifier)
window.name
跨文档通信API(Cross-document messaging)
片段识别符
片段标识符(fragment identifier)指的是,URL的#号后面的部分,比如http://example.com/x.html#fra...。如果只是改变片段标识符,页面不会重新刷新。
父窗口可以把信息,写入子窗口的片段标识符。
var src = originURL + "#" + data; document.getElementById("myIFrame").src = src; //子窗口通过监听hashchange事件得到通知。 window.onhashchange = checkMessage; function checkMessage() { var message = window.location.hash; // ... } //同样的,子窗口也可以改变父窗口的片段标识符。 parent.location.href= target + "#" + hash;
window.name
浏览器窗口有window.name属性。这个属性的最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。
//父窗口先打开一个子窗口,载入一个不同源的网页,该网页将信息写入window.name属性。 window.name = data; //接着,子窗口跳回一个与主窗口同域的网址。 location = "http://parent.url.com/xxx.html"; //主窗口就可以读取子窗口的window.name了。 var data = document.getElementById("myFrame").contentWindow.name;
这种方法的优点是,window.name容量很大,可以放置非常长的字符串;缺点是必须监听子窗口window.name属性的变化,影响网页性能。
例子:
www.test.com下a.html页:
www.domain.com下b.html页:
2
window.postMessage
这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。
举例来说,父窗口http://aaa.com向子窗口http://bbb.com发消息,调用postMessage方法就可以了。
var popup = window.open("http://bbb.com", "title"); popup.postMessage("Hello World!", "http://bbb.com");
postMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即"协议 + 域名 + 端口"。也可以设为*,表示不限制域名,向所有窗口发送。
子窗口向父窗口发送消息的写法类似。
window.opener.postMessage("Nice to see you", "http://aaa.com"); //父窗口和子窗口都可以通过message事件,监听对方的消息。 window.addEventListener("message", function(e) { console.log(e.data); },false);
message事件的事件对象event,提供以下三个属性:
event.source:发送消息的窗口
event.origin: 消息发向的网址
event.data: 消息内容
子窗口通过event.source属性引用父窗口,然后发送消息:
window.addEventListener("message", receiveMessage); function receiveMessage(event) { event.source.postMessage("Nice to see you!", "*"); }
event.origin属性可以过滤不是发给本窗口的消息。
window.addEventListener("message", receiveMessage); function receiveMessage(event) { if (event.origin !== "http://aaa.com") return; if (event.data === "Hello World") { event.source.postMessage("Hello", event.origin); } else { console.log(event.data); } }
postMessage的使用方法: otherWindow.postMessage(message, targetOrigin);
otherWindow: 指目标窗口,也就是给哪个window发消息,是
window.frames 属性的成员或者由 window.open 方法创建的窗口
message: 是要发送的消息,类型为 String、Object (IE8、9 不支持)
targetOrigin: 是限定消息接收范围,不限制请使用 ‘*’
例子:
//本地代码index.html
//server.com上remote.html,监听message事件,并检查来源是否是要通信的域。
LocalStorage
主窗口写入iframe子窗口的localStorage
//子窗口将父窗口发来的消息,写入自己的LocalStorage。 window.onmessage = function(e) { if (e.origin !== "http://bbb.com") { return; } var payload = JSON.parse(e.data); localStorage.setItem(payload.key, JSON.stringify(payload.data)); }; //父窗口发送消息 var win = document.getElementsByTagName("iframe")[0].contentWindow; var obj = { name: "Jack" }; win.postMessage(JSON.stringify({key: "storage", data: obj}), "http://bbb.com");
加强版的子窗口接收消息:
window.onmessage = function(e) { if (e.origin !== "http://bbb.com") return; var payload = JSON.parse(e.data); switch (payload.method) { case "set": localStorage.setItem(payload.key, JSON.stringify(payload.data)); break; case "get": var parent = window.parent; var data = localStorage.getItem(payload.key); parent.postMessage(data, "http://aaa.com"); break; case "remove": localStorage.removeItem(payload.key); break; } };
加强版的父窗口发送消息代码:
var win = document.getElementsByTagName("iframe")[0].contentWindow; var obj = { name: "Jack" }; // 存入对象 win.postMessage(JSON.stringify({key: "storage", method: "set", data: obj}), "http://bbb.com"); // 读取对象 win.postMessage(JSON.stringify({key: "storage", method: "get"}), "*"); window.onmessage = function(e) { if (e.origin != "http://aaa.com") return; // "Jack" console.log(JSON.parse(e.data).name); };
location.hash
这个办法比较绕,但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。www.a.com下的a.html想和www.b.com下的b.html通信(在a.html中动态创建一个b.html的iframe来发送请求)
但是由于“同源策略”的限制他们无法进行交流(b.html无法返回数据),于是就找个中间人:www.a.com下的c.html(注意是www.a.com下的)。
b.html将数据传给c.html(b.html中创建c.html的iframe),由于c.html和a.html同源,于是可通过c.html将返回的数据传回给a.html,从而达到跨域的效果。
//a.html
//b.html
//由于两个页面不在同一个域下,IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe,这里有一个a.com下的代理文件c.html。Firefox可以修改。 //c.html
直接访问a.html,a.html向b.html发送的消息为”sayHi”;b.html通过消息判断返回了”HiWorld”,并通过c.html改变了location.hash的值
AJAX
同源政策规定,AJAX请求只能发给同源的网址,否则就报错。
除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。
JSONP
WebSocket
CORS
JSONP
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。
它的基本思想是,网页通过添加一个