12.22每日一讲

构造函数

1.什么是构造函数

2.为什么使用构造函数

在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现（代码复用。）

没有使用构造函数

let p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
let p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
let p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
let p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };
// ...

使用构造函数

function Person(name, gender, hobby) {
    this.name = name,
    this.gender = gender,
    this.hobby = hobby,
    this.age = 6
}

当创建上面的函数以后， 我们就可以通过 new 关键字调用，也就是通过构造函数来创建对象了。

let p1 = new Person('zs', '男', 'basketball')
let p2 = new Person('ls', '女', 'dancing')
let p3 = new Person('ww', '女', 'singing')
let p4 = new Person('zl', '男', 'football')
// ...

3.构造函数的执行过程

(1) 当以 new 关键字调用时，会创建一个新的内存空间。

(2)函数体内部的 this 指向该内存

(3) 执行函数体内的代码

(4) 默认返回 this

4.不用new关键字，直接运行构造函数，是否会出错？如果不会出错，那么，用new和不用new调用构造函数，有什么区别？

1. 使用new操作符调用函数

   function Person(name){
     this.name = name;
     this.say = function(){
       return this.name;
     }
   }
   
   let person1 = new Person('good');
   person1.say(); // "good"
   

   用new调用构造函数，函数内部会发生如下变化：

2.直接调用函数

如果直接调用函数，那么，this对象指向window，并且，不会默认返回任何对象（除非显性声明返回值）。

let person1 = Person('nicole');
person1; // undefined
window.name; // good

发布微博案例 

1.字数变化

HTML代码

 <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>

JS代码

let useCount=document.querySelector(".useCount")
let textarea=document.querySelector("textarea")
//字数变化
textarea.addEventListener("input",function(){
    useCount.innerHTML=textarea.value.length
})

2.发布

HTML代码

<div class="w">
    <div class="controls">
      <img src="images/tip.png" alt=""><br>
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>

    </div>
    <div class="contentList">
      <ul>
      </ul>
    </div>
  </div>
  <script src="./w2.js"></script>

JS代码

let btn=document.querySelector("button")
let ul = document.querySelector(".contentList ul")
btn.addEventListener("click",function(){
    let newLi=document.createElement("li")
    newLi.innerHTML=`<img src="images/03.jpg">
                    <div>${textarea.value}</div>
               
                    <button class="del">删除</button>`
    ul.insertBefore(newLi,ul.children[0])

3.时间

JS代码

function datetime(){
    let date=new Date();
    let date2=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'
    let hours=date.getHours()>9?date.getHours():'0'+date.hours()
    let min=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes()
    let sec=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds()
    let week=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    let times=hours+':'+min+':'+sec+' '+week[date.getDay()]
    return(`${date2}-${times}`)
}
let btn=document.querySelector("button")
let ul = document.querySelector(".contentList ul")
btn.addEventListener("click",function(){
    let newLi=document.createElement("li")
    newLi.innerHTML=`<img src="images/03.jpg">
                    <div>${textarea.value}</div>
                    <br> 
                    <span class="shijian">${datetime()}</span>
                    <button class="del">删除</button>`
    ul.insertBefore(newLi,ul.children[0])

4.删除

JS代码

//内容
let btn=document.querySelector("button")
let ul = document.querySelector(".contentList ul")
btn.addEventListener("click",function(){
    let newLi=document.createElement("li")
    newLi.innerHTML=`<img src="images/03.jpg">
                    <div>${textarea.value}</div>
                    <br> 
                    <span class="shijian">${datetime()}</span>
                    <button class="del">删除</button>`
    ul.insertBefore(newLi,ul.children[0])
    //删除
    let del=document.querySelector(".del")
    del.addEventListener("click",function(){
    ul.removeChild(newLi)
})
})