当前位置：网站首页>2021 Yahong pen test question 2

2021 Yahong pen test question 2

2022-07-28 15:55:00 【PBitW】

Code running problem

Insert picture description here
Here is actually to test two knowledge points ：

static

Insert picture description here
Reference address ：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/static

constructor Construction method ( More detailed )

new When a function , Will directly execute the construction method of this function （ Be similar to java）, The constructor points to the object , So you don't introduce anything , It still has newColor="green" This thing ！

distinguish

We need to distinguish Constructor and constructor ！

Constructors It is generally capitalized , be used for new Function of the object , Usually inside Properties or methods are used this To define , and Construction method It is a prototype chain inside a function ,new When a function , Methods that will be executed directly , Also and this Hooked up ！

JavaScript in new Operator is used to create an object instance of a given constructor . The following example ：

function Person(name, age){
    
	this.name = name;
	this.age = age;
}
const person1 = new Person('Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}

We defined a constructor Person, And then through new Operators generate Person Reference an instance of the constructor and assign a value to it person1. Then print it out from the console person1 The content of , You can see that the instance object has name and age attribute , Their values are the values we pass in when we call the constructor .

that , We use new What happens when operators ？
Insert picture description here
thank ：JavaScript Medium new Principle analysis of operators

JS The difference between constructor and ordinary function in

1、 The constructor is also an ordinary function , The creation method is the same as that of ordinary functions , but Constructors are used to capitalize
2、 The difference between a constructor and a normal function is ： It's called in different ways , It's not the same （ Constructors are used to create new instance objects ）
3、 The function name of the constructor is the same as the class name ：Person( ) This constructor ,Person Is the function name , It's also the class name of this object
4、 For internal use this To construct properties and methods
5、 use instanceof You can check whether an object is an instance of a class , Yes, go back to true; All objects are Object Descendants of objects , So any object and Object do instanceof Will return to true

Reference resources ：JS The difference between constructor and ordinary function in

Prototype attribute

Insert picture description here
Be careful

there Objects are instance objects , No object object , In the back and in the front ！

Insert picture description here

thank ： Thoroughly understand JavaScript Prototype chain （ One ）—__proto__ Default point of

Objects and functions

js The object and function definitions of are the same , however new What comes out is the object , The direct use is the function ！

Code running problem （ Template string 、 Tag function ）

Insert picture description here

Programming problem （ Determine style –> Change the style ）

Insert picture description here
answer ：https://blog.csdn.net/Eva3288/article/details/108140003

The rookie is stupid , The easiest thing to think of The zoom （zoom,transform） and max-width little does one think ！！！

then box-sizing: border-box;padding: 0 50px; This is really a test , Before you see it , I thought I would cut the picture , The result turned out to be a squashed picture ！

js The rookie thought of a way , But I didn't write the code , The answer of the rookie ：
Insert picture description here
The first is wrong ！ What the rookie thinks is flex-basis To cover width attribute , But it turns out not , This method is right for div,span It works , however img no way ！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> /*  no way  */ div{
       width: 500px; display: flex; } div img{
       width: 400px; flex-basis: 250px; } div span{
       display: inline-block; width: 400px; height: 300px; background-color: aqua; flex-basis: 250px; } /*  feasible  */ /* img{ max-width: 300px; } */ /* img{ box-sizing: border-box;padding: 0 50px; } */ </style>
</head>
<body>
  <div>
    <!-- <img src="./logo.png" style="width: 400px !important;"/> <img src="./logo.png" style="width: 400px !important;"/> -->
    <img src="./logo.png" />
    <img src="./logo.png" />
  </div>
  <div>
    <!-- <span></span> -->
    <span></span>
  </div>
</body>
</html>

I hope that readers who understand me can come and communicate ！

The way of animation doesn't matter , Basically, these are the key points ！

Code running problem （ Type conversion ）

Insert picture description here

Type conversion table

Insert picture description here

Be careful ：

Please be sure to write down these things , The written examination is really easy ！

Add

toString

Insert picture description here

Be careful

A string of ‘true’ = = true perhaps ‘true’ = = = true It's all back false,false Empathy ！

however

valueOf

Insert picture description here

Object to original value

Insert picture description here
Be careful ：

js There are only undefined、null、""、0、NaN Turn into Boolean The type is false！

Implicit conversion of objects

Insert picture description here

== Implicit transformation of

Insert picture description here

Comparison operator type conversion

Insert picture description here

+ Implicit transformation of

Insert picture description here

Be careful ：

So there are strings + Time will not continue to be converted into numbers , But connected ！

summary

Basically is ： No matter calculation or comparison , All of them convert operands into numbers or strings for comparison ！ And type conversion is really important , Many written examinations will be taken , You must remember ！！！

So the above running results ：
Insert picture description here