js面向对象的方法

作者 : 开心源码 本文共2488个字,预计阅读时间需要7分钟 发布时间: 2022-05-12 共170人阅读

首先面向对象是什么,为什么要面向对象。
由于JavaScript对每个创立的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个栗子:

function person() {}
那么person的原型链就是:
person(proto) > Function.prototype(proto) > Object.prototype
所以最终的结果都是指向原型对象,就称为面向对象

那么问题来了,怎样面向对象呢?其实就是问怎样创立对象,创立对象有哪几种方法。

1、工厂模式—本质就是在函数中创立一个对象,每次调使用时候传入不同的参数,而后返回这个对象

// 工厂模式    function Person(name, age) {        var p = {};//创立一个对象        p.name = name;        p.age = age;        p.say = function() {            console.log("hello "+this.name);        }        return p;//返回这个对象    }    var p1 = Person('LL',24);    console.log(p1);//{name:"LL",age:"24",say:f}    console.log(p1.say());//hello LL    var p2 = Person('XX',25);    console.log(p2);//{name:"XX",age:"25",say:f}    console.log(p2.say());//hello XX

image.png

2、构造函数模式—跟工厂模式的区别就是函数中使用this指代对象也不使用return了,还有一个区别就是创立对象的时候是new一个对象

// 构造函数模式    function Person(name, age) {        this.name = name;        this.age = age;        this.say = function() {            console.log("hello "+this.name);        }    }    var p1 =new Person('LL',24);    console.log(p1);//Person {name:"LL",age:"24",say:f}    console.log(p1.say());//hello LL    var p2 = new Person('XX',25);    console.log(p2);//Person {name:"XX",age:"25",say:f}    console.log(p2.say());//hello XX

image.png

3、原型方法—在这就先不讲了,就是通过创立一个Function而后在function.prototype上增加属性和方法,再new一个Function这种方式创立一个对象。

4、混合模式(原型加构造函数的模式)— 就是把实例的属性写在构造函数里面,每个实例共享的属性和方法写在原型里面。那么什么是实例的属性呢?就是通过new一个函数都会有的属性就是实例的属性,它们互不影响各自独立。那么什么是共享的属性和方法呢?就是prototype里面假如有sing这个方法,那么new两个实例后都会有sing这个实例的方法。那么问题来了new两个实例之后构造函数里面的属性不是也是都会有的吗?所以区别就是prototype里面的属性和方法是不独立的,不论new多少个实例,prototype始终指向的地址都是同一个,也就有了面向对象的省内存,不白费资源的优点。好直接上代码

//构造函数里面写上实例的属性和方法function Person(name, age) {        this.name = name;        this.age = age;        this.say = function() {            console.log("hello "+this.name);        }    } //原型上写共享的属性和方法    Person.prototype.sing = function() {            console.log("Hi "+this.name);        } //或者者这么写        /*Person.prototype={            constructor:Person,            sing:function() {                console.log("Hi "+this.name);            }       }*/     var p1 =new Person('LL',24);    console.log(p1);//Person {name:"LL",age:"24",say:f}    console.log(p1.say());//hello LL    console.log(p1.sing());//Hi LL    var p2 = new Person('XX',25);    console.log(p2);//Person {name:"XX",age:"25",say:f}    console.log(p2.say());//hello XX    console.log(p2.sing());//Hi XX

image.png
image.png

那么我们如何来证实一下原型上的sing方法是共使用的呢?看上面两个图中,打印的p1和p2下面的proto中都有sing:f()方法,p1和p2调使用sing方法的时候会在实例属性和方法中查找sing方法,实例中找不到这个sing方法,所以就会在原型链中查找,这就是所谓的上溯原型链,在Person的protorype中找到了sing方法,所以p1和p2调使用的是同一个sing方法,这也就是所谓的共享一个sing方法。

那么现在还有一个问题,为什么p1和p2是现在自己的实例属性中查找,找不到再到构造函数的原型中查找呢?我们来分析一下这个问题,我把这个原型中sing方法改成say方法,那么现在实例属性中有say方法,原型中也有say方法了,打印的时候是打印Hello+this.name还是Hi+this.name呢,假如是打印的Hello+this.name就成功验证了先在实例属性中查找,找不到就到原型中查找,当然找到的话就返回值就不继续查找了,接着上代码验证一下。

image.png

在p1中可以看到,有两个say方法,打印p1.say();返回的是Hello LL;那么也就验证了上述的说法。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » js面向对象的方法

发表回复