preface
Coordinates: Hangzhou. Oneself be engaged in front end work almost 2 years, oneself is not a section of a class background, be a small dish chicken to just now entry bar. Two years ago, I had an interview. In fact, my company didn’t know much about my skills due to my technical skills, which mainly depended on my attitude and learning ability. Therefore, I am very grateful to the former two employers for bringing me into the company. This year, the project I worked on in my previous employer has almost taken shape, and I found myself in a bottleneck period, so I came out to make a breakthrough. Going out for an interview is actually a quick way to realize your weaknesses and hopefully give a little bit of advice to people like me who are in the interview.
Pen test
1) What is js inheritance? Prototype chain?
function super (){
this.a = '1'
}
function sub (){
super.call(this)
}
Copy the codeor
function sub() {... } sub.prototype = new super(); // Create an instance of super directly on his prototype.Copy the codeDuring new, what happens is, change the direction of this, execute the code in super, and return a new function.
Es6 inheritance method.
class sub extends super() {constructor(){// I am sure that I am still able to buy some props. Therefore, I am sure that I am still able to buy some props. Therefore, I am sure that I am still able to buy some props. // Prints out the defined props // super(), which stands for the constructor of the parent class, to create a new this object of the parent class. // Subclasses must call this method or an error will be reported if they inherit. Subclasses must call the super method from the constructor method or they will get an error when creating a new instance. // This is because the subclass's own this object must be molded by the parent class's constructor to get the same instance attributes and methods as the parent class, and then processed with the subclass's own instance attributes and methods. If you don't call super, your subclasses don't get this. } // constractor is necessarily necessary? Constractor yes, it implicitly declares you to be empty, even if you do not declare it.Copy the code2) What is Ajax?
Asynchronous javascript + Xml
Var XHR = new XmlHttpRequest() or new ActiveXObject() xhr.onreadychange =function() {if(xhr.readyState = 4){
if(xhr.status == 200){
var test = xhr.responseTest()
}
}
}
xhr.open("Get" , url ,false) // The third parameter, whether asynchronousCopy the code3) How to undo an array?
(1) Set method
var arr = new Set (arr);
arr = Array.from(arr);
Copy the code(2) The key of the object can also be used to make a judgment
(3) For loop
4) The difference between REM and EM?
Rem is relative to thetaThe root elementFont size on
Em is relative to phiThe parent elementFont size
Here is a comprehensive guide: when to use EM and REM
(Updated on 2018/07/03 22:51)
5) Box model
(1) Box sizing: content-box; (2) Box-sizing: border-box;
6) HTTP status code
200, 304, 500, 404, 415
Function add(1)(2)(3) //6, function add(1)(2)(3)… (n)
There are two built-in js methods, valueOf and toString. Both methods are automatically called in certain cases, and when the user defines new valueOf and toString methods, the new methods will take precedence.
Tostring () is called first when it is needed to do string concatenation, and valueOf is called again if the original type cannot be returned.
ValueOf () is called first for operations like number.
For functions, add and add() return different things. Add () returns the value of return. Add, on the other hand, calls valueOf’s code. The conversion of the function is similar to number.
The problem solving
function add() { var args = [].slice.call(arguments); // The closure concept is also used for argsfunction() { var arg_fn = [].slice.call(arguments); // The recursion here is to merge parametersreturn add.apply(null, args.concat(arg_fn));
}
fn.valueOf = function() {
returnargs.reduce((a, b) => a + b); // The real output is valueof}return fn;
}
Copy the code8) Implement sequential setTimout and Promise. Here we need to understand that JS is single-threaded. The execution of functions in memory is synchronous and asynchronous. Synchronous tasks are executed one by one in the main thread, while asynchronous tasks are registered to the event queue first. Wait for the main thread task to complete, then go to the asynchronous queue to take out the task in the main thread to execute.
There are two more concepts to understand here, macro events and micro events.
Macro events: script, setTimeout, setInterval
Micro events: Promise
One more thing to say here is that promises are functions that are executed immediately
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function(a, b) {
console.log(2);
for(var i = 0; i < 10; i++) {
i == 9 && a();
}
console.log(3);
}).then(function() { console.log(4) }); Console. log(5) // output :2,3,5,4,1Copy the codeMacro events are executed, then micro events are executed, and then loops again.
9)
function Foo() {
getName = function () { alert (1); };
return this;
}
Foo.getName = function() { alert (2); }; Foo.prototype.getName =function() { alert (3); }; var getName =function() { alert (4); };function getName() { alert (5); } // Write the following output: foo.getName (); //2 getName(); // 4 Foo().getName(); // 1 getName(); // 1 new Foo.getName(); //2 = new (foo.getName)(); new Foo().getName(); // 3 = (new Foo()).getName() new new Foo().getName(); // 3 = new ((new Foo()).getName)()Copy the codenew Foo.getName(); And new Foo (). The getName (); The difference between
New Foo combined with the case that belongs to a new no-argument list (level 17)
New Foo() combined with the case where new has an argument list (level 18)
The last three can be referred to the JS operator priority problem
- What’s the difference between object.defineProperty () and the Object out of {}
To be honest, I’m not really sure what it is. I think it’s probably defineProperty. You can also define enumerable, read-write attributes
Updated on 2018/07/05
An object defined by defineProperty cannot be enumerable without defining enumerable:true. {}} is an object that can be enumerable directly.
11) What are the methods for HTTP caching? Strong cache, negotiated cache, 304
Strong cache: Carche-control: max-age
Negotiation cache: use 304
12) Call, apply The difference between these and bind. How bind is implemented native.
The difference between call and apply is the following parameter. Call passes one by one, apply an array.
Bind can return a new function.
Function.prototype.bind = function(context) {// Check whether this method is called by a function or notif(typeof this ! = ="function") {
throw new Error(this + "is not a function"); } var self = this; var args = []; // Loop out the parametersfor (var i = 1, len = arguments.length; i < len; i++) {
args.push(arguments[i]);
}
var fbound = function () {
var bindArgs = Array.prototype.slice.call(arguments);
self.apply(this instanceof self ? this : context, args.concat(bindArgs)); } fbound.prototype = Object.create(self.prototype); // Return a function that not only has the same body as the function being called, but also inherits its prototype chainreturn fbound;
}
Copy the code13) Scramble an array in one sentence?
arr.sort(function() {return0.5 - Math. The random ()})Copy the code14) Arrow function this pointing problem
Ruan yifeng blog is very accurate, recommend arrow function
15) Browser rendering principle slightly (to very detailed, may write an article ~, you can go to the open source community to find a special article to understand ~)
16) Fixed right side, adaptive left side. Left fixed right adaptive. Fixed height above, adaptive height below.
Float -box{display:flex; justify-content:end; } .left{ width: 100%; border:1px solid#ddd;
}
.right{
width:300px;
border:1px solid #ddd;
}
Copy the code17) Horizontal center? Horizontally and vertically centered?
Horizontal center
For inline elements, use text-align: center; Ok, as follows
.container {
text-align: center;
}
Copy the codeMargin: auto; Many websites in the PC era did this.
.container {
text-align: center;
}
.item {
width: 1000px;
margin: auto;
}
Copy the codeAbsolute positioning elements can be implemented in combination with left and margin, but the width must be known.
.container {
position: relative;
width: 500px;
}
.item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin: -150px;
}
Copy the codeVertical center
Inline elements can set line-height to equal height, such as a single line of text centered vertically:
.container {
height: 50px;
line-height: 50px;
}
Copy the codeAbsolute positioning elements can be implemented in combination with left and margin, but the dimensions must be known.
- Advantages: Good compatibility
- Cons: Need to know the size in advance
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -40px;
}
Copy the codeAbsolute positioning can be centered by combining transform.
- Advantages: No need to know the size in advance
- Disadvantages: Poor compatibility
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: blue;
}
Copy the codeAbsolute positioning combined with Margin: Auto, no need to know the size in advance, good compatibility.
.container {
position: relative;
height: 300px;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
Copy the codeNext section: algorithm ~ ~ I have been trying to be as productive as a sow ~
Updated at 2018/7/03 11:38
June 2018, Front-end interview experience (middle)