2018.3.21 Front-end common interview questions

1.

(function(){
    var a=b=1;
    console.log(a);
})()
console.log(a,b);
VM187:3 1
VM187:5 Uncaught ReferenceError: a is not defined
    at <anonymous>:5:13

Note: console.log(a); output 1,
a local scope, b is not declared (for global scope)
2

var car=null;
var bar;
console.log(car==bar)
VM528:3 true

3. Store the array locally

var arra=[1,2,3,4];
localStorage.setItem('key',JSON.stringify(arra));
var read=JSON.parse(localStorage.getItem('key'));
console.log(read,read.length);

4 Determine whether an object is an array
The first method:
Syntax: A instanceof B, which means whether the prototype of object A is B.prototype. If yes, return true, if not, return false.

 var a={};
  var b=[];
  console.log(a instanceof Object);//true
  console.log(b instanceof Array);//true

One problem with using the instanceof operator is that it assumes there is only one global scope. If there are multiple frames (iframe elements) in a web page, there are actually more than two different global execution environments, so there are more than two different versions of the Array constructor. If you pass an array from one frame to another, the passed-in array has a different constructor than the one created natively in the second frame. The incoming array is judged by the instanceof operator in this framework and it will return false. code show as below:

var a={};
  var b=[];
  console.log(a instanceof Object);//true
  console.log(b instanceof Array);//true

  var frame=document.createElement("iframe");//创建一个框架
  document.body.appendChild(frame);
  var c=window.frames[0].Array;//取得框架全局执行环境中的Array构造函数
  var d=new c();//在框架全局执行环境中创建一个数组d
  console.log(d instanceof Array);//在当前页面的执行环境中用instanceof操作符判断d是否为数组,返回false
  console.log(Array.isArray(d));//true

The second method:

Use the new Array.isArray() method in ECMAScript 5. The purpose of this method is to determine whether a value is an array or not, regardless of the global execution context in which it was created.

Third method:

Use the native toString() method on Object.prototype to judge.

The method of use is as follows:

Object.prototype.toString.call(value)
This method returns a string in the format of [object NativeConstructorName]. Each class has a [[Class]] attribute inside, which specifies the constructor name in the above string.
This method cannot detect the function name of a non-native constructor, so any constructor defined by the developer will return [object Object].

var a={};
  var b=[];
  var frame=document.createElement("iframe");//创建一个框架
  document.body.appendChild(frame);
  var c=window.frames[0].Array;//取得框架全局执行环境中的Array构造函数
  var d=new c();//在框架全局执行环境中创建一个数组d
  console.log(Object.prototype.toString.call(a));//[object Object]
  console.log(Object.prototype.toString.call(b));//[object Array]
  console.log(Object.prototype.toString.call(d));//[object Array]

  function Person() {
     this.name=name;
  }
  var n=new Person();
  console.log(Object.prototype.toString.call(n));//[object Object]

5. What is a closure and why should it be used
Closure (closure) is a major difficulty of javascript, and it is also its characteristic. Many advanced applications rely on closures to achieve. Closures are a bridge.
We cannot access local variables inside the function outside the function! Normally we can't do it


<script>
   function num(){
    //用var声明一个变量num1
     var num1 = 15;
     return function(){
         return num1;
    }
  }
 var num2 = num();
 var num3 = num2();
 console.log(num3);//15

  }
</script>

6. Common cross-domain methods, what are the advantages and disadvantages
1: Image ping

Image ping is a way to do simple, one-item, cross-domain communication with the server
var img=new Image();
img.onload=img.onerror=function(){
alert(“done”)
}
img.src=”http ://www.example.com/test?name=sl";

2:jsonp (most practical) jsonp is through dynamic

function callbackFunction(){
   alert("回滚");
}
var script=document.createElement("script");
script.src="http://frergeoip.net.json/?callback=callbackFunction";
document.body.insertBefore(script,document.body.firstChild);

3: Use jquery to achieve cross-domain (the easiest)

<script> $.getJSON("http://example.com/data.php?callback=?",function(jsondata){ //回调事件 }); </script> 

It's just that we don't need to manually insert script tags and define callback functions.
jQuery will automatically generate a global function to replace the question mark in callback=?, and then it will be automatically destroyed after obtaining the data, which actually acts as a temporary proxy function.
The $.getJSON method will automatically determine whether it is cross-domain. If it is not cross-domain, it will call the ordinary ajax method; if it is cross-domain, it will call the jsonp callback function in the form of asynchronously loading the js file.

4: Cross subdomains by modifying document.domain

在页面 http://www.example.com/a.html 中设置document.domain:
<iframe src="http://example.com/b.html"  id="iframe"  onload="test()"></iframe>
<script>
   document.domain="example.com";   //设置成他们的父域
   function test(){ 
      document.getElementById("iframe").contentWindow;
   }
</script>

However, if you want to directly request the http://example.com/b.html page through ajax in the http://www.example.com/a.html page , even if you set the same document.domain, it will not work ,

So the method of modifying document.domain is only applicable to the interaction between frames of different subdomains.
If you want to interact with pages of different subdomains through the ajax method, in addition to using the jsonp method, you can also use a hidden iframe as a proxy. The principle is to let this iframe load a page in the same domain as the target page you want to get data through ajax, so the page in this iframe can use ajax to get the data you want normally, and then through our I just talked about how to modify document.domain, so that we can completely control this iframe through js, so that we can let the iframe send ajax requests, and then we can also get the received data.

5: Use window.name for cross-domain

The window object has a name attribute, which has a characteristic: that is, in the life cycle of a window (window), all pages loaded by the window share a window.name, and every page has a read to window.name Write permission, window.name is persisted in all pages loaded by a window, and will not be reset when a new page is loaded.
in a.html page

in a.html page

in b.html page

Use window.name to get the value that the b page wants

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326079052&siteId=291194637