JavaScript高级，ES6 笔记第三天

构造函数会造成内存浪费的问题

原型prototype

自己创造对象方法

constructor编辑

构造函数会造成内存浪费的问题

这里创造了两个实例，对于sing都会创造一部分内存，然而sing内部的函数是一样的，我们希望两者指向的是同一个内存区域，即指向同一个function();

原型prototype

也就是说将sing定义到prototype中可以使得所有对象的sing都指向同一块内存‘

公共属性写道构造函数里面

公共方法写道原型对象上

自己创造对象方法

求最大值


        Array.prototype.max = function(){
 
            // return Math.max(...this)
            let max = this[0];
            for (let i = 1;ilength;i++){
                if(this[i]>max){
                    max = this[i]
                }
 
            }
            return max;
        }
 
        arr = new Array(2,3,4,1,5,66,7);
        console.log(arr.max());

求和


        Array.prototype.sum = function(){
            return this.reduce((prev,item)=>prev+item,0)
        }
 
        arr = new Array(2,3,4,1,5,66,7);
        console.log(arr.sum());

constructor

也就是说可以指向原型的父辈构造函数


    function star(name){
      this.name = name;
      
    }
 
    console.log(star.prototype.constructor == star);//true

当给原型幅值时：

就不能指向构造函数了，因为对原型进行了赋值操作，故应该将constructor重新指回构造函数

对象原型_proto_

也就是说所有对象都有对象原型__proto__（也写作[[prototype]]），指向prototype,其是只读的。

对象原型也有constructor，指向构造函数

原型继承

也就是构造函数的原型继承person对象，叫做原型继承

遇到的问题

主要是给woman man构造函数都继承了person对象

然后给woman添加了一个baby方法

结果发现，red 和 black都有baby方法

原因是 woman和man的.prototype都指向了同一个地址，既person，当我改变woman.prototype时，实际上也就把person改变了

解决方法：将person换成构造函数

这样就可以保证，woman和man的.prototype指向不同的地址

原型链

对于具体对象 ldh，其ldh.__proto__指向原型对象


    function person(){}
    const ldh = new person();
    console.log(ldh.__proto__ == person.prototype);//true

而原型对象也有对象原型，既person.prototype.__proto__ 存在

console.log(person.prototype.__proto__ == Object.prototype);//true

同理，也存在Object.prototype.__proto__，为null

console.log(Object.prototype.__proto__);//null

那么这几个__proto__连起来，就是原型链

相当于原型链提供了一个查找的方向，可以一层一层查找方法或属性所在的位置

例如数组的map方法，其实是写在Array.prototype.map()，但是因为有原型链的存在，所以普通的数组对象也可以使用这个方法


    let sss = [123,22,33,44];
    let sae = sss.map(item=>item+3)
    console.log(sae);

instanceof


    function person(){}
    const ldh = new person();
    console.log(ldh.__proto__ == person.prototype);//true
    console.log(Object.prototype.__proto__);//null
 
    console.log(ldh instanceof person);//true
    console.log(ldh instanceof Object);//true
    console.log(ldh instanceof Array);//false

小案例

目的：按下按钮弹出提示框（采用构造函数的方法来做）

先给CSS

具体解释看代码，


<body>
  <button id="delete">删除button>
  <button id="login">登录button>
 
 
  <script>
    //先定义一个构造函数，表示这个提示框，里面有两个参数，即标题和内容，这个地方需要创造一个div，并按照格式写入
    function model(header = '', body = '') {
      this.header = header;
      this.body = body;
      this.box = document.createElement('div')
      this.box.className = 'model';
      this.box.innerHTML = `  
    ${this.header} x
    ${this.body}
  
`

}
//给构造函数添加关闭的方法，就是之间移除之前创造的div
model.prototype.close = function(){
document.body.removeChild(this.box)
}
//给构造函数添加打开的方法，先加判断，页面中没有提示框才能添加提示框
//添加子节点box
//将box中的x与close函数绑定
model.prototype.open = function(){
if(!document.querySelector('.model')){
document.body.appendChild(this.box)
this.box.querySelector('i').addEventListener('click',()=>{
this.close()
})
}
}
//实例化
document.querySelector('#delete').addEventListener('click',function(){
const m = new model('温馨提示','你没有权限删除');
m.open()
})
script>
body>

JavaScript高级，ES6 笔记 第三天

构造函数会造成内存浪费的问题

原型prototype

自己创造对象方法

constructor

对象原型_proto_

原型继承

原型链

instanceof

小案例

JavaScript高级，ES6 笔记第三天