时间戳

首页 > 技术文章 > js面向对象

js面向对象

weizaiyes 2017-01-05 11:22 原文

面向对象-创建方式

第一种json方式

//推荐使用场景：作为函数的参数 临时只用一次的场景 如设置函数原型对象
var obj={};
var obj2={
    name:"weizai",
    age:18,
    sayHi:function(){
        console.log("hi");
    }
}
//添加其他属性
obj2.newProp=123; //js动态属性 没有要访问的属性 直接添加属性
//缺点 不能作为对象创建的模板 new不可以

//=====================================================

第二种 创建面向对象的方式 new Object() 不推荐

var obj3=new Object();
//添加属性
obj3.name='kitty';
obj3.syaHi=function(){
    console.log(name+' '+'sayHi');
};

//跟上面的方式一样 只能临时用一次这个对象 new不可以

第三种 构造函数构造对象方法

//把一个函数对象 当作构造函数使用 一般要把函数对象的首字母大写
function Person(){
    this.name='13';//通过this可以直接给 构造出来的对象添加属性
    this.sayHi=function(){
        console.log(this.name);
    }
}

var p=new Person();
// new运算符作用
// 第一步：
// 执行构造函数(new后面那个函数) 
// 在构造函数内部创建一个空对象
// 第二步：
// 把上面的空对象跟构造函数的原型对象进行关联
// 第三步：然后把this指向当前空对象

console.log(p.name);//p.name 从构造函数里面创建的
p.sayHi(); //此方法内部的this执行p对象

第三种方式的升级改造版本

//第三种方法的缺点：对象的内部函数会在每个对象中都存在一份
//如果创建非常多的话 非常浪费内存 
//函数的行为是所有对象可以共有的 不需要每个对象都保存一份
//把函数放到原型中进行声明 所有的对象都有了公共的函数 而且内存中只保留一份
//所有的属性写道对象的内部
function Sprite(){
    this.name='123';
    this.age=19;
}
Sprite.prototype={
    sayHi:function(){

    },
    init:function(){

    }
};
//继续升级 属性作为参数
function Sprite(sname,sage){
    this.name=sname||'';
    this.age=sage||18;
}
Sprite.prototype={
    sayHi:function(){

    },
    init:function(){

    }    
}

//问题：1.调用者如果传递参数的顺序发生变化 那么废了
//问题：2.参数增减会导致函数声明变化 调用的地方也可能发生变化
//继续升级
function Sprite(option){
    //用一个参数把所有参数覆盖
    this.name=option.name||'';
    this.age=option.sage||18;
}
Sprite.prototype={
    sayHi:function(){

    },
    init:function(){

    }
};
//继续优化 把初始代码放到init函数中
function Sprite(option){
    this.init(option);
}
Sprite.prototype={
    sayHi:function(){

    },
    init:function(option){
        this.name=option.sname||'';
        this.age=option.sage||18;
    }
};

补充js调用的四种模式

  • 方法调用模式
function Person(){
    var name1="itcast";
    age1=19;
    show1=function(){
        console.log(this.name);
    };
    return {
        age:age1,
        name:name1,
        show:show1
    };
}
var p=new Person();
p.show(); //show方法中this指向了p对象
  • 函数调用模式
function add(a,b){
    this.result=a+b;
}
add(3,9);//此方法调用时 this指向了window
console.log(result);
  • 构造器调用模式
function Person(){
    this.name="123";
    this.age-19;
    this.show=function(){
        console.log(this.name);
    };
}
var p=new Person();
p.show(); //show方法中方法this 指向了p对象
  • call和apply调用模式
function add(a,b){
    this.result=a+b;
}
var p={};//定义一个空对象
add.call(p,3,4);//this指向了p
//apply和call一样的用法 apply第二个参数用数组传递

推荐阅读