JavaScript构造函数与原型链深入解析-CSDN博客

本文链接：https://blog.csdn.net/langwang_100/article/details/120198946

代码运行题

在这里插入图片描述
这里其实就是要考两个知识点：

static

在这里插入图片描述
参考地址：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/static

constructor构造方法(较详细)

new一个函数时，会直接执行该函数的构造方法（类似于java），构造方法指向该对象，所以你什么都不传入，其还是有newColor="green"这个东西！

区分

这里要区分构造方法和构造函数！

构造函数就是一般首字母大写，用来new出对象的函数，一般里面的属性或者方法都用this来定义，而构造方法是函数内部的一种原型链，new一个函数时，会直接执行的方法，也是和this挂钩的！

JavaScript中new操作符用于创建一个给定构造函数的对象实例。如下例子：

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

我们定义了一个构造函数Person，然后通过new操作符生成Person构造函数的一个实例并将其引用赋值给变量person1。然后控制台打印出person1的内容，可以看到该实例对象具有name和age属性，它们的值就是我们在调用构造函数时传入的值。

那么，我们使用new操作符的时候都发生了哪些事呢？
在这里插入图片描述
感谢：JavaScript中的new操作符的原理解析

JS 中构造函数和普通函数的区别

1、构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写
2、构造函数和普通函数的区别在于：调用方式不一样，作用也不一样（构造函数用来新建实例对象）
3、构造函数的函数名与类名相同：Person( ) 这个构造函数，Person 既是函数名，也是这个对象的类名
4、内部用 this 来构造属性和方法
5、用instanceof 可以检查一个对象是否是一个类的实例，是则返回true；所有对象都是Object对象的后代，所以任何对象和Object做instanceof都会返回true

参考：JS 中构造函数和普通函数的区别

原型属性

在这里插入图片描述
注意

这里的对象是实例对象，不是object对象，后面前面都是！

在这里插入图片描述

感谢：彻底理解JavaScript原型链（一）—__proto__的默认指向

对象和函数

js的对象和函数定义是一样的，但是new出来的就是对象，直接使用的就是函数！

代码运行题（模板字符串、标签函数）

在这里插入图片描述

程序设计题（确定样式–>改变样式）

在这里插入图片描述
答案：https://blog.csdn.net/Eva3288/article/details/108140003

菜鸟傻了，里面最容易想到的缩放（zoom，transform）和max-width没想到！！！

然后box-sizing: border-box;padding: 0 50px;这个确实比较考验，在看到之前，我以为会裁剪图片，结果原来是挤压图片！

js的办法菜鸟想到了，但是没有写出代码，菜鸟的答案：
在这里插入图片描述
这里第一是错的！菜鸟想到的是flex-basis来覆盖width属性，但是事实证明不行，这个方法对div，span有效，但是img不行！

<!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>
    /* 不行 */
    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;
    }
    /* 可行 */
    /* 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>