22 函数3之构造函数_3*22函数-CSDN博客

本文链接：https://blog.csdn.net/qq_47670443/article/details/125091124

1什么是构造函数,构造函数就是函数，仅是函数的另一种调用形式

构造函数的作用创建对象构造函数实例化对象

 function Person() {
      console.log('hello');
    }
    // 普通调用
    Person();
    // 使用new调用
    let ret =new Person();
    console.log(ret);

使用new调用就是构造函数的实例化,实例化的结果就是产生实例化对象。

2构造函数定义实例成员

方法1：先实例化对象，再对实例化出来的对象单独添加成员。

function Person(){

}
   let p1=new Person()
   p1.age=20
   p1.gender='男'
   console.log(p1);

方法2：在构造函数里，为实例化出来的对象添加成员

function Person(){
  // 语法
  // this.XXX=xxx
  this.age=20,
  this.gender='男',
  this.say=function(){
  console.log(111)
  }
}

let p1 = new Person()
let p2= new Person()

console.log(p1,p2);
p1.say()

3带参数的构造函数实例化对象

function Goods(name,price,count){
   this.name=name;
   this.price=price;
   this.count=count;
 }

 let p1=new Goods('彩电',888,5)
 console.log(p1); //打印出来的是实例化的对象
 let p2=new Goods('冰箱',999,8)
 console.log(p2);

4new的执行过程

当使用new调用一个函数时，js内部执行了以下几步

function Person(){}

1创建一个空对象

let obj={}

2将空对象赋值给this

3执行this.xxx=xxx 向对象上添加成员

4当函数执行结束时，会将这个对象隐式的return出来

this=Obj

this.xxx=xxx

return this

5实例成员和静态成员

根据成员保存的位置进行区分

// 静态成员：构造函数上的属性或方法，只能由构造函数本身访问。

// 实例成员：实例对象上的属性或方法，只能由实例化的对象来访问

function Person(){
  // 构造函数内的this.xxx虽然写在构造函数内，但最终添加到实例对象上
  this.age=20;
  this.say=function(){
    console.log('hello');
  }
}

let p1=new Person();  //实例化对象
console.log(p1);  //打印对象
// 实例成员：
// 实例对象上的属性或方法就是实例成员
console.log(p1.age);     //实例化对象属性  20
p1.say();               //hello

// 静态成员
// 构造函数上的属性或方法，就是静态成员
Person.eyes =2//此时就不要把person当成函数来看，当成对象来看
Person.fn = function(){
  console.log('hello');
}
Person.fn()   //hello
console.log(Person.eyes)  //2

案例：利用构造函数封装模态窗口

<body>
  <button id="delete">删除</button>
  <button id="login">登录</button>

  <!-- <div class="modal">
    <div class="header">温馨提示 <i>x</i></div>
    <div class="body">您没有删除权限操作</div>
  </div> -->

 <script>
// 面向对象分析：
// 弹窗就是一个对象，先定义一个构造函数
// 弹窗对象要有显示的能力
// 弹窗对象要有隐藏的能力
// 弹窗还有标题，内容信息（属性）
// 用于展示效果的Dom元素


// 实现步骤：
// 1封装一个构造函数
// 2封装显示的方法
// 3封装关闭的方法
// 4模态

// 构建函数
function Modal(title,content){
  // 方法中的this就代表实例化的对象
  this.title=title;
  this.content=content;
  // 创建一个用于页面展示效果的标签
  this.el=document.createElement('div')
  // 为了让样式生效，为创建的元素定义className
  this.el.className='modal'
  // 通过innerHTML方法创建内容
  this.el.innerHTML=`<div class='header'>${this.title}<i>x</i></div>
  <div class='body'>${this.content}</div>`

  // 封装一个显示的方法
this.show = function(){
  // 将this.el元素追加到body里即可实现显示
  document.body.appendChild(this.el)
  // 获取关闭按钮，为其绑定事件，也就是隐藏
  // document.querySelector('.header i')
  // 
  this.el.querySelector('.header i').addEventListener('click',
  // function(){-
  //   document.body.removeChild(this.parentNode.parentNode)
    ()=>{document.body.removeChild(this.el)
      console.log(this); //Modal 对象
      console.log(this.el);  //元素

  })
}
}

// 为按钮注册点击事件  只要点击就会生成对象，也就是窗口，只不过窗口的字由参数决定，样式已经全部决定了，只改字
document.querySelector('#delete').addEventListener('click',function(){
 let m= new Modal('温馨提示','您无权删除');
 m.show();
})

document.querySelector('#login').addEventListener('click',function(){
 let m= new Modal('登录成功','正为您跳转');
 m.show();
})

 </script>
</body>
</html>