创建对象常用的几种方式?

76 阅读2分钟

一省:HTML

14. 什么是语义化?语义化的好处是什么?

  1. 语义化是指用合理的html标记以及其特有的属性去格式化文档内容。如标题用h1-h6,段落用p标签。
  2. 语义化的好处:
  • 在没有css的情况下,页面也能呈现出很好的内容结构。
  • 语义化使代码更具有可读性,便于团队开发和维护。
  • 语义化有利于用户体验。
  • 语义化有利于SEO(和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息)。

二省: CSS

14. 图片下的空隙如何解决?

<style>
    p{
      width: 200px;
      height: 200px;
      padding: 0;
      margin: 0;
      background: tomato;
    }
    img {
      width: 200px;
    }
  </style>
</head>
<body>
  <div>
    <p>123</p>
    <img src="./大万万漂亮.jpg" alt="">
    <p>123</p>
  </div>

图片下有缝隙

解决方式:

  1. 父元素设置font-size:0; 缺点是会影响到其他子元素的字体大小。
  2. img标签设置display:block;
  3. img标签设置vertical-align: top/middle/sub属性

三省:JavaScript

14. 创建对象常用的几种方式?

  1. 直接用{}创建,实质上等同于new Object()
let obj = {}
obj.name = "Jack"
obj.say = function(){
  console.log("hello!")
}
let obj1 = {}
obj1.name = "Mick"
obj1.say = function(){
  console.log("hello!")
}
  1. 用new Object()创建
let obj = new Object()
obj.name = "Jack"
obj.say = function(){
  console.log("hello!")
}
let obj1 = new Object()
obj1.name = "Mick"
obj1.say = function(){
  console.log("hello!")
}
  1. 字面量创建
//字面量创建
let obj = {
  name: "Jack",
  say = function(){
    console.log("hello!")
  }
}
let obj1 = {
  name: "Mick",
  say = function(){
    console.log("hello!")
  }
}

以上三种方式有一个缺点就是想要创建类似的对象会写很多重复的代码,工厂模式可以解决这个问题。

  1. 工厂模式创建
// 工厂模式创建
function createPerson(name) {
  let obj = {}
  obj.name = name
  obj.say = function() {
    console.log("hello!")
  }
  return obj
}
let p1 = createPerson("Jack")
let p2 = createPerson("Mick")
console.log(p1 instanceof createPerson)//false
console.log(p1 instanceof Object)//true

工厂模式的缺点就是无法准确识别对象的类型。

  1. 构造函数创建
// 构造函数创建
function Person(name){
  this.name = name
  this.say = function(){
    console.log("hello!")
  }
}
let p1 = new Person("Jack")
let p2 = new Person("Mick")
console.log(p1 instanceof Person)//true
console.log(p1.say === p2.say)//false

构造函数的缺点是其定义的方法在每个实例上都会创建一遍,占用不必要的内存。

  1. 原型模式创建
// 原型创建
function Person(){}
Person.prototype.name = "Jarry"
Person.prototype.friends = ["Marry"]
Person.prototype.say = function() {
  console.log("hello!")
}

let p1 = new Person()
p1.friends.push("Janms")
let p2 = new Person()
console.log(p1 instanceof Person);//true
console.log(p1.say === p2.say);//true
console.log(p2.friends);//['Marry', 'Janms']

很明显,这种方式创建对象的时候没办法传参数,而且存在引用类型属性共享的问题。

  1. 混合(构造函数+原型)模式(推荐)
// 构造函数 + 原型
function Person(name) {
  this.name = name
  this.friends = ["Jerry"]
}
Person.say = function() {
  console.log("hello!")
}

let p1 = new Person("Jack")
p1.friends.push("Bob")
let p2 = new Person("Mick")
console.log(p1 instanceof Person);//true
console.log(p1.say === p2.say);//true
console.log(p2.friends);//['Jerry']