JavaScript面向对象与原型

绝地灬酷狼 2022-04-01 04:46 284阅读 0赞

构造函数虽然不错，但有的时候我们需要对属性和方法进行修改，做过vue项目的应该都遇到过这种情况，我们需要声明一些全局变量，我们一般这么做

import axios from 'axios';  // 引入axios
    // 配置 请求头
    axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    Vue.prototype.$axios = axios;  // 给vue函数添加一个原型属性$axios 指向axios
    Vue.prototype.post = function(API, params, successCB, failedCB) { 
      // 此处代码省略...
    }; // 给vue函数添加一个原型属性 post
    
    import API from './api'; // 引入API接口
    Vue.prototype.API = API; // 给vue函数添加一个原型属性API

这时候就用到了原型,经过上面这简单的封装的好处是在vue实例或组件中不用再去重复引用axios 直接用this.post(API接口,\{请求参数\},成功回调,失败回调)就能执行axios 方法了;  
对于js原型不是很了解的 可以看下我之前的文章**javascript的原型和原型链**，这次遇到了面向对象，换个角度再次讨论

# 原型模式创建对象 #

我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。  
使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。  
也就是说，不用在构造函数中定义对象的实例信息，而是将这些属性和方法添加到原型对象中

function Person() { }
    Person.prototype.name = "姓名"
    Person.prototype.nickname = "昵称"
    Person.prototype.doSth = function () { 
        console.log("做什么事情");
    }
    
    const LJJ= new Person()
    console.log(LJJ.name) // 姓名 
    console.log(LJJ.nickname) // 昵称
    LJJ.doSth() // 做什么事情

然后继续输出下LJJ

console.log(LJJ)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70]  
我们可以通过对象实例访问保存在原型中的值，但是我们不能通过对象实例重写原型中的值，强制的重写也可以，继续看代码

function Person() { }
    Person.prototype.name = "姓名"
    Person.prototype.nickname = "昵称"
    Person.prototype.doSth = function () { 
        console.log('做什么事情');
    }
    
    const LJJ = new Person()
    LJJ.__proto__.name = "刘家军"
    console.log(LJJ.name) // 刘家军
    
    const YH = new Person()
    console.log(YH.name) // 刘家军

现在再输出下Person的原型

console.log(Person.prototype)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70 1]  
由上面的图片和代码我们可以看出,这么做就是修改了原型链，通过原型创建的其他实例也会同步更改，这样不是我们所希望的结果，怎么办？  
我们继续往下看

在实例中添加属性，使这个属性和原型中的属性同名，这个属性会屏蔽掉（也可以理解为覆盖掉）原型中的那个属性

function Person() { }
    Person.prototype.name = "姓名"
    Person.prototype.nickname = "昵称"
    Person.prototype.doSth = function () { 
        console.log('做什么事情');
    }
    
    const LJJ = new Person()
    const YH = new Person()
    LJJ.name = "刘家军"
    
    console.log(LJJ.name) // 刘家军
    console.log(YH.name) // 姓名

然后我们输出下 LJJ

console.log(LJJ)

![在这里插入图片描述][20181229103409274.png]  
我们可以看出"**刘家军**"在实例中，"**姓名**"在原型中，  
[我们访问LJJ.name][LJJ.name]，会先在实例上去搜索name属性，实例上存在name属性，就返回实例上的name属性，停止搜索。  
[我们再去访问YH.name][YH.name]，同样的会在实例上进行搜索name属性，但是没搜到，继续顺着原型链进行搜索，搜到了，返回原型中的name属性。  
我们在原型中添加一个属性，这个属性会屏蔽掉原型中的同名属性，也就是说会阻止我们访问原型中的同名属性，但是不会修改，如果我们把这个属性设置为null，会怎么样呢？

function Person() { }
    Person.prototype.name = "姓名"
    Person.prototype.nickname = "昵称"
    Person.prototype.doSth = function () { 
        console.log('做什么事情');
    }
    
    const LJJ = new Person()
    const YH = new Person()
    LJJ.name = null
    
    console.log(LJJ.name) // null
    console.log(YH.name) // 姓名

所以说，就算设置为null，结论是和上面是相同的，只要在实例上存在这个要访问的属性，就会停止搜索  
实例中的属性我不想要了怎么办，设置null也无效，那么就使用 [delete][] 删除

function Person() { }
    Person.prototype.name = "姓名"
    Person.prototype.nickname = "昵称"
    Person.prototype.doSth = function () { 
        console.log('做什么事情');
    }
    
    const LJJ = new Person()
    const YH = new Person()
    
    LJJ.name = null
    delete(LJJ.name) // 删除实例中的属性
    
    console.log(LJJ.name) // 姓名
    console.log(YH.name) // 姓名

# 判断属性属于实例还是原型 #

有个内置方法hasOwnProperty()用来判断属性是否来自于实例，属于实例则返回true，否则false  
要想深入了解下hasOwnProperty()可以看下我以前的文章**Object.hasOwnProperty()方法**

function Person() { }
    Person.prototype.name = "姓名"
    Person.prototype.nickname = "昵称"
    Person.prototype.doSth = function () { 
        console.log('做什么事情');
    }
    
    const LJJ = new Person()
    const YH = new Person()
    LJJ.name = "刘家军"
    
    console.log(LJJ.hasOwnProperty('name')) // true
    console.log(YH.hasOwnProperty('name')) // fasle

# 原型模式创建对象的简化版 #

//简化前
    function Person() { }
    Person.prototype.name = "姓名"
    Person.prototype.nickname = "昵称"
    Person.prototype.doSth = function () { 
        console.log("做什么事情");
    }
    
    //简化后
    function Person() { }
    Person.prototype = { 
        name: "姓名",
        nickname: "昵称",
        doSth: function () { 
            console.log("做什么事情");
        }
    }

# 通过原型模式创建对象注意事项 #

在原型中添加公有方法是值得鼓励的，类似于我们在vue中添加全局ajax，添加一下基本类型的变量也可以，但是当添加引用类型的属性时候问题就出现了

function Person() { }
    Person.prototype = { 
        name: "姓名",
        nickname: "昵称",
        hobby: ['旅游','看电影'],
        doSth: function () { 
            console.log("做什么事情");
        }
    }
    
    const LJJ = new Person()
    const YH = new Person()
    LJJ.hobby.push("敲代码")
    console.log(LJJ.hobby) // ["旅游","看电影","敲代码"]
    console.log(YH.hobby) // ["旅游","看电影","敲代码"]

我只在LJJ实例中push了“敲代码”，结果影响到了YH；  
所以**当在实例对象上添加引用类型时要格外小心**  
解决方法

function Person() { }
    Person.prototype = { 
        name: "姓名",
        nickname: "昵称",
        hobby: ['旅游','看电影'],
        doSth: function () { 
            console.log("做什么事情");
        }
    }
    
    const LJJ = new Person()
    const YH = new Person()
    
    LJJ.hobby = LJJ.hobby.concat("敲代码")
    
    console.log(LJJ.hobby) // ["旅游","看电影","敲代码"]
    console.log(YH.hobby) // ["旅游","看电影"]

预知后事如何 且看下分解

友情链接：[点击查看所有文章目录][Link 1]

友情链接：[点击查看　JavaScript面向对象系列文章目录][JavaScript]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70]: /images/20220401/134f067e96854cdcb4bef0f3c7f79f21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70 1]: /images/20220401/d793f3787d264507af4183eaa89575e0.png
[20181229103409274.png]: /images/20220401/fd6bbafc286d4457bcb4b55986423436.png
[LJJ.name]: http://xn--LJJ-ot9d688fgo9co5o.name
[YH.name]: http://xn--YH-2f3ct3hztdcv6adw0e59q.name
[delete]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete
[Link 1]: https://blog.csdn.net/qq_42911663/article/details/86365901
[JavaScript]: https://blog.csdn.net/qq_42911663/article/details/86367564