[Interview questions] The small details that need to be paid attention to in front-end js

Dachang interview questions share interview question bank

Front-end and back-end interview question banks (necessary for interviews) Recommended: ★★★★★

Address: front-end interview question bank   web front-end interview question bank VS java back-end interview question bank Daquan

arrow function

//普通函数:
let add2 = function (x, y) {
            return x + y;
        }
        
//第一步:去掉function
let add2 =  (x, y) {
            return x + y;
        }
        
//第二步:在()和{}之间加上胖箭头=>
let add2 =  (x, y) =>{
            return x + y;
        }
        
//当只有一个参数时,()也可以省略
let add2 =  x =>{
            return x + x;
        }

//当函数只有返回值时,return和{} 也能去掉
let add2 =  x => x + x;
复制代码

what is this?

thisRefers to who is calling the function, if notwindow

  • Any function is essentially called through an object, if not directly specified, it iswindow
  • All functions have a variable inside this
  • Its value is the current object on which the function was called
test():window
p.test() : p
new test() : 新建的对象
p.call(obj) : obj
复制代码
  1. Which scope the arrow function is declared in, thisit points to whom
  2. The difference between arrow function and normal function  thisbinding
  3. Ordinary ones functionwill not be bound this before entering an ordinary function, thispointing to it Window, after entering an ordinary function, thisit will become the pointing of the function,
  4. And the arrow function will be bound this, before entering the arrow function, thispointing Windows, after entering, because the arrow function will be bound , so it still points thisat this time ,thiswindow
  5. If you enter the normal function first and then enter the arrow function, thisit will change from the pointer before entering to window the function pointer;

function's prototype properties

Each function has a prototypeproperty, which points to an Objectempty object by default (that is, called: prototype object). Here  Objectis a function prototype object has a property constructor, which points to the function object Date.prototype.constructor===Date

Add properties to prototype objects (usually methods

All instance objects of the function automatically have all the properties (methods) in the prototype object Add Date.prototype.getSum=function(){} , Datethere will be getSumthis method

Explicit Prototype vs Implicit Prototype

  • Every function function has a prototypeproperty, the explicit prototype (property)
  • Every instance object has one  __proto__, which can be called an implicit prototype (property)
  • The value of the implicit prototype of the object is stored in the value of the explicit prototype of the corresponding constructor. The  Fn.prototype===fn.__proto__ address value of the same object points to an Objectempty object by default. The prototype object
  • Prototype chain is to find implicit prototype properties__proto__
  • The prototype chain is used to look up object properties
  • When reading the property value of an object: it will automatically go to the prototype chain to find
  • When setting the object property value: the prototype chain will not be searched, if the property does not exist in the current object, the property will be added directly and its value will be set
  • Methods are generally defined in the prototype (__proto__), and properties are generally defined on the object itself through the constructor
  • The object pointed to by the explicit prototype of the function is an empty Objectinstance object by default, (but Objectthis sentence is not satisfied) because the prototype object is actually an object, of course it can be said to be Objectan instance
  • All functions are Functioninstances of, (including Functionitself)
Function.__proto__=== Function.prototype//  true
复制代码
  • Object's prototype object is the end of the prototype chain
Object.prototype.__proto__   //   null 
复制代码

variable declaration hoisting

//在定义语句之前就能访问到
var a =3
function fn(){
  console.log(a)
    var a=4
}
fn()    //  undefined  
复制代码

Because variables will be declared and promoted, when entering a function, var the variables in the function will be declared first, but no value is assigned, then the output is executed, and the assignment is executed last, so the result is undefined. When looking for variables, they will be found in the function first, based on the principle of proximity

The difference between arrow function and ordinary function

  1. Arrows will not be bound, ordinary functions will be bound (to be able to bind is to be able to change)
  2. thispoint to different
  3. Ordinary function, who calls this function, thispoints to whom
  4. Arrow function, where to define the function, thiswho to point to
  5. Arrow functions are suitable for thisunrelated callbacks, timers, and array callbacks
  6. Not suitable for thiscallbacks related to event callbacks, object methods

A variable is not data itself, it is just a container for storing data

let a = [0,1,2];
let b = a;
b[0] = 5;
console.log(a);//  [5, 1, 2]
复制代码

It is customary to type a space after the array

// 获取用户输入的内容,并且输出到页面  1输入,2存储,3输出
let uname = prompt('请输入您的姓名:')
document.write(uname)
复制代码

js basic data types

  1. number type
  2. string type
  3. boolean Boolean type
  4. undefined Undefined types are only declared, not assigned
  5. null empty type

reference data type

  1. object object
  2. function function
  3. array array
  4. js It is recommended to use single quotes to enclose the string "" ''``

Template string splicing strings and variables can enter carriage return and line feed without error in backticks

document.write('大家好,我叫’ + name + ',今年' + age + '岁')
复制代码

When the content is spliced ​​with variables, wrap ${}the variable with backticks as a whole

//也可以`${3.14 * r * r}`,一般不建议这样
document.write(`大家好,我叫${name},今年${age}岁`)
document.write()//能够识别html标签
console.log(typeof null) // object  null 就是将一个对象赋值给一个变量,只不过这个对象还没创建好,就先让null赋值给这个变量
复制代码

data type conversion

Implicit conversion, automatic conversion within the system

rule:

  1. +号As long as one of the two sides is a string type, the other will be converted to a string;
  2. +Operators other than, like, etc. - * / , convert to numeric types

Note:  +号As a positive sign, it can be converted Number as an example  :console.log(10 + +'10')// 20

explicit conversion

console.log(Number(‘10.01’)) // 10.01
console.log(parseInt(‘10.99’)) // 10  只保留整数,不四舍五入
console.log(parseFloat(‘10.99’)) // 10.99  转化为数字型,会保留小数
//parseInt 和 parseFloat 会先将 数据通过String 转换为字符串,再去截取
console.log(Number('true')) //  1
console.log(parseInt('true')) // NAN
console.log(Number(‘null’)) // 0
(Number(‘undefined’)) // NAN
console.log(parseInt(a,16)) // 将变量a 转换为16进制
复制代码

The difference between Number and parseFloat

  • Number ('11.1abc') Only strings of numeric type can be placed, others cannot, otherwise the output NaN(NOT a Number) Number will be called first String()函数, and then converted

  • parseInt('11.1abc') // 11.1 Will only return numeric types that start with a number, if parseInt('abc11.1abc')// NaN often used to filter units parseInt('100px') // 100

The value fetched by the form is a string type

  • return Only one value can be returned. If you want to return multiple values, you can use an array to store the value and return the array

Dachang interview questions share interview question bank

Front-end and back-end interview question banks (necessary for interviews) Recommended: ★★★★★

Address: front-end interview question bank   web front-end interview question bank VS java back-end interview question bank Daquan

Guess you like

Origin blog.csdn.net/weixin_42981560/article/details/130113687