javaScript面向对象的几种写法

javaScript面向对象的几种写法

  • 字面量的方式创建对象写法,也是最浪费资源的写法。dog.run()就调用了dog的run方法。但是这里只有一条狗,想要n条狗就要var狗,不能量产,也就是要创建多个实例会导致代码冗余。
var dog = {
        name:'啊黄',
        color:'黄色',
        run:function () {
            console.log(this.name + 'run');
        }
    };
    console.log(dog.name);
    dog.run();
  • 内置构造函数创建对象的写法,这是一种内置函数和字面量的方式创建对象的方法,但是创建的对象无法复用,也会导致代码冗余。
    var dog1 = new Object();
    dog1.name = '阿黄';
    dog1.color = '黄色';
    dog1.run = function(){
    	console.log(this.name + 'run');
    };
    console.log(dog1.name);
    dog1.run();
  • 工厂函数创建对象的写法,这里可以量产还可以传递参数,如var dog1 = new Dog(‘旺财’,‘yellow’);就有了dog1,以此类推就有dog2,dog3···,但是这种方法是借助创建Object对象来创建d,然后返回d来实现的,这种方法会发现无法区分对象的类型。
function Dog(name,color) {
        var d = new Object();
        d.name = name;
        d.color = color;
        d.run = function () {
            console.log(this.name + 'run');
        };
        return d;
    }
    var dog1 = new Dog('旺财','yellow');
    console.log(dog1.name);
    dog1.run();
  • 自定义构造函数创建对象的方法,构造函数的方法是通过构造函数与new关键字连用,在内部会默认创建一个新的对象,然后把这个对象赋值给this,默认使用ruturn关键字把这个对象返回。这种方法每new一个dog,都会为这个dog产生相应的属性和方法,不知道你们有没有注意到这个run在每一个对象实现的内容是一样的,为了更好地节约资源···
function Dog(name,color) {
        this.name = name;
        this.color = color;
        this.run = function () {
            console.log(this.name + 'run');
        };
    }
    var dog1 = new Dog('旺财','yellow');
    console.log(dog1.name);
    dog1.run();
    var dog2 = new Dog('阿毛','white');
    //dog1的run并不等于dog2的run
    console.log(dog1.run === dog2.run);  //false
  • 自定义构造函数创建对象的方法,把对象公用的方法提取出来,作为全局变量,这样子每个对象都能访问,但是这样子会破坏对象的封装性(run方法不是构造函数Dog的方法),还会污染全局变量。
var run = function () {
        console.log(this.name + 'run');
    };
    function Dog(name,color) {
        this.name = name;
        this.color = color;
        this.run = run;
    }
    var dog1 = new Dog('旺财','yellow');
    console.log(dog1.name);
    dog1.run();
    var dog2 = new Dog('阿毛','white');
    //dog1的run并不等于dog2的run
    console.log(dog1.run === dog2.run);  //true  为什么会打印出来true?因为引用类型数据传递的是内存地址。{如果不了解引用类型,详情见本博客的(值数据类型与引用类型)}
  • 自定义构造函数创建对象使用原型对象来保存相同的方法,使用原型这种方法把run()放进这个构造函数的共享库里面(这个run()只有一个),通过Dog new 出来的对象都可以使用这个方法。
function Dog(name,color) {
        this.name = name;
        this.color;
}
Dog.prototype.run = function () {
    console.log(this.name + 'run');
};
var dog1 = new Dog('旺财','yellow');
console.log(dog1.name);
dog1.run(); 
var dog2 = new Dog('阿毛','white');
//dog1的run等于dog2的run
console.log(dog1.run === dog2.run);
  • 传递对象来接受属性
function Dog(option) {
        var option = option || {};
        this.name = option.name;
        this.color = option.color;
    }
    Dog.prototype = {
        run:function () {
            console.log(this.name  + 'run');
        }
    };
    var dog1 = new Dog({
        name:'旺财',
        color:'yellow'
    });
    console.log(dog1.name);
    dog1.run();
    var dog2 = new Dog({
		name:'啊毛',
        color:'white'
	});
    //dog1的run等于dog2的run
    console.log(dog1.run === dog2.run);

希望可以帮到有需要的人,如果有什么问题,望指出

评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值