js-面向对象

js-面向对象

JavaScript 又称为ECMAScript
ECMAScript 有两种开发模式：
一种是函数式(过程化)
二种面向对象(OOP)

 

创建对象

 

            //创建一个对象
            var obj=new Object();  //通过new关键字创建一个对象obj
            obj.name="llr";
            obj.age=18;
            obj.fn=function(){
                return this.name+this.age
            }
            
            var obj2=obj
            obj2.name="靓靓人"
            
            console.log(obj.fn())  //靓靓人18

 

工厂方法

            function createObject(key,value){
                var obj=new Object();
                obj.name=key;
                obj.age=value;
                obj.fn=function(){
                    return this.name+this.age
                }
                return obj
            }
            
            var obj1=createObject("llr",18)
            var obj2=createObject("靓靓人",28)
            
            console.log(typeof obj1)  //object
            console.log(typeof obj2)  //object
            console.log(obj1 instanceof Object)  //instanceof  检测一个类型是不是对象    true
            
            var arr=[1,2,3,4]
            console.log(arr instanceof Array)    //true
            
            console.log(obj1.fn())   //llr18
            console.log(obj2.fn())   //靓靓人28

构造函数

            function Box(key,value){
                this.name=key;
                this.age=value;
                this.fn=function(){
                    return this.name+this.age
                }
            }
            //Box("靓靓人",18)  作为普通函数使用
            var obj=new Box("llr",18)  //作为构造函数使用
            var obj2=new Box("llr",18)
            alert(obj.fn==obj2.fn) //false  引用一个地址
            console.log(obj instanceof Box)
            console.log(obj.fn())
            
            //说明:
            //构造函数还是函数，和普通函数的区别，主要在于使用方法，构造函数使用的时候必须加new关键字，否则就变成了普通函数

函数冒充

 

            function Box(key,value){
                this.name=key;
                this.age=value;
                this.fn=function(){
                    return this.name+this.age
                }
            }
            //Box("靓靓人",18)  作为普通函数使用
            var obj=new Box("llr",18)  //作为构造函数使用
            
            var obg2=new Object()  //通过new关键字，定义一个对象,对象冒充
            
            //Box.call(obg2,"冒充的",100)  //call() 改变this指向
            Box.apply(obg2,["冒充的",100]) //apply() 改变this指向,用数组的形式书写参数
            console.log(obj.fn())
            console.log(obg2.fn())
            //需求：
            //obg2这个对象，想让它具有构造函数的方法
            //对象冒充

 

prototype 原型

 

            var Box={
                prototype:{}
            }
            Box.prototype.name="llr"
            console.log(Box.prototype.name)
            //原型的形式创建对象
            /*
            function Box(){}  //声明一个构造函数
            
            Box.prototype.name="靓靓人"
            
            var obj=new Box()
            */

 

            //原型
            function Box(){};  //声明一个构造函数
            Box.prototype.name="llr";  //通过原型添加属性和属性值
            Box.prototype.age=18;
            Box.prototype.fn=function(){  //通过原型添加方法
                return this.name+this.age
            }
            var obj1=new Box()
            var obj2=new Box()
            
            alert(obj1.fn==obj2.fn) //true

 继承

 

            function Box(){  //构造函数
                this.name="联络人";
            }
            function Pox(){  //构造函数
                this.job="特工"
                this.name="靓靓人"
            }    
            

            Pox.prototype=new Box() //Pox 继承了 Box，通过原型继承，形成一个链条，这个链条成为原型链

            var pox=new Pox()
            
            console.log(pox)  
            console.log(pox.name)  //靓靓人
            console.log(pox.job)  //特工

 

闭包

闭包：是指有权访问另一个函数作用域中的变量的函数。

闭包在函数套函数时候会出现。

            function box(){
                var user="llr"
                return function(){
                    return user
                }
            }
       
            console.log(box()())  //llr
            
            function pox(){
                console.log(age)
            }
            pox()   //报错

            function box(){
                var user="llr"
                return function(){  // 通过匿名函数返回box()的局部变量
                    return user
                }
            }
            console.log(box()()) //通过box()()来直接调用匿名函数返回值

            var num=100;   //全局变量
            function box(){
                num=num+1   //box函数中局部变量
                //同名局部变量高于全局变量，
                //局部变量没有加var 关键字，就相当于全局变量，变量提升
            }
            box();
            console.log(num)  // 101