如何理解原型？

前端每日三省

于 2023-02-09 20:23:30 发布

阅读量149

点赞数 1

分类专栏： dairy 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42560424/article/details/128959972

版权

dairy 专栏收录该内容

100 篇文章 14 订阅

订阅专栏

文章详细阐述了HTML中<title>与<h1>的区别，CSS的position属性的各种定位方式，以及JavaScript中的原型概念和作用，包括对象的隐式原型和显示原型，以及constructor与构造函数的关系。

摘要由CSDN通过智能技术生成

一省：HTML

11. title与h1的区别？

title：可定义文档的标题，概括了网站信息，可以告诉搜索引擎或者用户这个网站的内容主题是什么。
h1：写在文章正文的标题部分，是展示给用户看的，更突出其视觉效果。

<html lang="en">
<head>
  <title>网页主题</title>
</head>
<body>
  <h1>文章名称主题</h1>
</body>
</html>

二省： CSS

11. position的值有哪些？分别是相对于哪个位置定位的？

position的值有：static、relative、absolute、fiexd、sticky

static: 静态(默认)，正常流，无特殊表现。
relative: 相对定位，相对于自身在正常文档中的位置定位。
absolute: 绝对定位，相对于最近的定位祖先元素(static元素除外)进行定位。
fiexd：固定定位，相对于浏览器窗口定位的，这意味着即使滚动页面，它也始终位于同一位置。
sticky：粘性定位，根据用户的滚动位置进行定位。

sticky粘性布局

三省：JavaScript

11. 如何理解原型？

每一个对象都有一个[[prototype]](在浏览器中为__proto__)属性，这个属性称为对象的原型(隐式原型)。
每一个函数创建的时候都会有一个prototype属性，即显示原型。除此之外，因为函数也是一个对象，所以函数也有隐式原型(__proto__).
对象的隐式原型指向构造函数的显示原型，即

//普通对象
var obj = {}
console.log(obj.__proto__ === Object.prototype)//true

//构造函数创建的对象
function Person(){}
var person = new Person()
console.log(person.__proto__ === Person.prototype)//true

原型的作用：
当我们使用一个对象的属性或者方法时，先从当前对象查找，如果没有就会沿着它的原型查找，如：

function Person(){}
Person.prototype.name = "Jason"
Person.prototype.say = function () {
  console.log("say hello!");
}
var person = new Person()
console.log(person.name);//Jason
person.say();//say hello!

补充:
原型对象(prototype)还有一个属性是constructor，构造函数的prototype指向原型对象，原型对象的constructor指回构造函数，即

function Person(){}
var person = new Person()
console.log(Person.prototype === person.__proto__);//true
console.log(Person.prototype.constructor === Person);//true
console.log(person.__proto__.constructor === Person);//true