JS中面向对象

1.JS中的闭包

      闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)。

闭包主要是为了解决变量作用域的问题。函数内部能读取全局变量,函数外部无法读取函数内部的变量【局部变量】),为了在函数外部读取函数内部的局部变量,所以就有了闭包。

特点:函数b是在a内嵌套的,函数a(外层函数)返回函数b(内层函数)。

用途:1.读取函数内部的局部变量  2.让局部变量的值保留在内存中

    function f1(){
        var n=999;
        nAdd=function () {
            n=n+1;
        };
        function f2() {
            alert(n);
        }
        return f2;
    }
    var rs=f1();
    rs();//999
    nAdd();
    rs();//1000

通过上面的例子,我们知道函数内部的局部变量n一直保存在内存中,局部变量n并没有被回收。

闭包的优缺点:

(1)优点:有利于封装,可以访问局部变量

(2)缺点:内存占用浪费严重,内存泄漏

2. JS对象声明

(1)字面式:

var person={
    name:"zhangsan",
    age:26,
    eat:function(){
        alert("我在吃");
    }
};
person.name   //zhangsan
person.eat()  //我在吃

(2)new Object()

var obj=new Object();
obj.name="zhangsan";
obj.age=100;
obj.infos=function(){
    return this.name+":"+this.age;
};

(3) js构造方法声明对象

function Person(name,sex,age){
    this.name=name;
    this.sex=sex;
    this.age=age;//属性
    this.show=function(){
        alert(this.name+" "+this.sex+" "+this.age);
    }
}
var obj=new Person("zhangsan","male",20);
obj.show();

(4) js中工厂模式声明对象:根据某种模式,可以不断的创造对象。

function createObject(name, age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.run=function(){
        return this.name+" "+this.age;
    }
    return obj;
}
var obj1==createObject("zhangsan",20);
var obj2==createObject("lisi",30);

(5) js中原型模式声明对象:任何js方法或函数,都自带一个prototype属性,且它以对象方式存在。

//第一种方式
function test(){
    //空对象
}
//alert(test.prototype instanceof Object);//true prototype是Object子对象
test.prototype.color="red";
test.prototype.heights="1.7";
test.prototype.showInfo=function(){
    alert(this.color+" "+this.heights);
}
var car=new test();
test.prototype.showInfo();


//第二种方式
function test2(){
    //空对象
}
test2.prototype={
    color:"red",
    heights:"1.7",
    showInfo:function(){
         alert(this.color+" "+this.heights);
    }
}

(6)混合模式:构造+原型

function blog(name,url,friend){
    this.name=name;
    this.url=url;
    this.friend=friend;    
}
blog.prototype={
    show:function(){
        alert(this.name);
    },
    gets:function(){
        alert(this.friend);
    }
};
var peo=new blog("zhangsan","http://www.baidu.com","李四");
peo.showinfo();

3.遍历对象的属性及方法

(1)遍历对象的属性:对象可以当作数组处理 for(var i in obj)

for(var i in obj){//i是属性或方法的名称
    alert(obj[i]);
}

(2)对象在内存中的分布

内存分为栈内存,堆内存,数据段,代码段。对象存在堆内存,对象的地址存栈内存,但是对象中的方法是方法名存在堆内存,方法的体存在代码段中,所以调用对象的方法时,先在栈内存找到对象,然后根据地址在堆内存找到方法名,然后再根据地址找到代码段中的函数体。

3. 封装:把对象内部数据和操作细节进行隐藏

JS中并没有像其他语言一样提供private关键字来实现封装,为了解决封装问题,JS中可以通过闭包实现封装(函数内部声明的变量,外部是访问不到的)。

function A(){
    var t=3;
    function _xx(){
        alert("我是内部方法,外部无法访问");
    }
    this.xx=function(){
        return _xx;
    }
}
var a=new A();
var b=a.xx();//_xx
b();//"我是内部方法,外部无法访问"

在这里,t就是A的私有成员,_xx就是A的私有方法。A向外提供了一个公有方法xx,xx可以访问A的私有成员和方法。这样就达到了封装的目的。

4. 原型链与继承

所有的引用类型都有一个__proto__属性(也叫隐士原型,它是一个属性)。

所有的引用类型都有一个prototype对象(也叫显示原型,它是一个Object)。

所有的引用类型,它的__proto__属性指向它的构造函数prototype对象。

原型:是利用prototype添加属性和方法。

function Foo(name,age){
    this.name=name;
    this.age=age;
}
//每个函数都有一个prototype对象,所有对象都可以自由扩展
Foo.prototype={
    showName:function(){
        console.log(this.name);
    },
    showAge:function(){
        console.log(this.age);
    }
}

var p=new Foo("xiaoming",26);
/*当试图调用一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它的__proto__属性寻找,而__proto__属性指向prototype对象,所以就是去prototype对象找
p.showName();//xiaoming
p.showAge();//26

有的人可能会有疑惑,为什么要把方法放在prototype对象上创建呢?直接将showName和showAge放Foo对象不就好了。其实这是为了节省资源。将函数写在prototype对象上(prototype只有一份),每个对象的__proto__属性指向共用的prototype对象,就达到了共享的目的,这样我创建多个Foo对象时,每个对象都可以使用prototype属性里的showName、showAge方法,这样就节省了很多资源。

原型链:JS在创建对象(不论是普通对象还是函数对象)时,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对象prototype。当试图调用对象的属性或方法时,先在该对象中寻找是否存在调用的属性或方法,若不存在,则就会去该对象的__proto__属性(也就是它的构造函数prototype对象)中去寻找。那又因为prototype是一个对象,所以它也有一个__proto__属性。这样就形成了原型链。

		function Foo(name,age){
		 	this.name=name;
		 	this.age=age;
		}
		Object.prototype.toString=function(){
			//this是什么要看执行的时候谁调用了这个函数。
			console.log("I'm "+this.name+" And I'm "+this.age);
		}
		var fn=new Foo('小明',19);
		fn.toString(); //I'm 小明 And I'm 19
		console.log(fn.toString===Foo.prototype.__proto__.toString); //true
		
		console.log(fn.__proto__ ===Foo.prototype)//true
		console.log(Foo.prototype.__proto__===Object.prototype)//true
		console.log(Object.prototype.__proto__===null)//true

fn.__ proto __=== Foo.prototype
又因为Foo.prototype是一个普通的对象,它的构造函数是Object,所以:
Foo.prototype.__ proto __=== Object.prototype
通过上面的代码,我们知道这个toString()方法是在Object.prototype里面的,当调用这个对象的本身并不存在的方法时,它会一层一层地往上去找,一直到null为止。所以当fn调用toString()时,JS发现fn中没有这个方法,于是它就去Foo.prototype中去找,发现还是没有这个方法,然后就去Object.prototype中去找,找到了,就调用Object.prototype中的toString()方法。这就是原型链,fn能够调用Object.prototype中的方法正是因为存在原型链的机制。

原型继承:

将上述的Foo.prototype对象指向自己要继承的对象,就达到了继承的目的。

    function person(name,age) {
        this.name=name;
        this.age=age;
    };

    function programer(sex) {
        this.sex=sex;
    };
    programer.prototype=new person("xiaohua",20);//原型继承

    var p=new programer("男");
    console.log(p.name);//pragramer中没有name,去p.__proto__找=去programer.prototype找=去person中找,找到了。
    console.log(p.sex);

构造函数继承:在子类内部构造父类的对象实现继承

function person(name){
    this.name=name;
    this.say=function(){
        alert(this.name);
    }
}
function child(name,age){
    this.pObj=person;//构造函数继承,子对象的参数name传递到父对象中
    this.pObj(name);
    this.age=age;
    this.say=function(){
        alert(this.name+":"+this.age);
    }
}
var p=new child("李四",20);
p.say();

call和apply继承:

    function person(name,age){
        this.name=name;
        this.age=age;
        this.say=function(){
            alert(this.name+" "+this.age);
        }
    }

    //call继承
    function student(name,age,height){
        person.call(this,name,age);//call继承
        this.height=height;
    }

    var stu=new student("zhangsn",20,170);
    stu.say();
    console.log(stu.height);

    //apply继承
    function teacher(name,age,height){
        person.apply(this,[name,age]);//apply继承
        this.height=height;
    }
    var tea=new teacher("lisi",[18,150]);
    tea.say();
    console.log(tea.height);

//call和apply继承不能继承父类的prototype绑定的方法,可以用原型继承解决

5.对象冒充(用的不多)

function person(name,age){
    this.name=name;
    this.age=age;
    this.sayHi=function(){
        alert("hi");
    }
}
person.prototype.walk=function(){
    alert("walk");
}
function student(name,age,grade){
    this.newMethod=person;//冒充person对象,传递特权属性和特权方法给子类
    this.newMethod(name,age);
    this.grade=grade;
}
var s1=new student("zhangsan",15,5);
s1.sayHi();//hi
s1.walk();//出错

//所以,s1继承了person的特权属性和特权方法,没有继承共有属性和共有方法


 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值