包装对象

原始类型（字面量\值类型）boolean number str

• 字面量创建过程

var str = '123'  ==> js在后台隐式调用new String()构造函数/包装器
创建出来后会把隐式调用构造函数/包装器创建出对象，创建完后就把这个对象扔掉，把值赋值给str 这里只有值没有对象了

str.sayhi = 'hi'  这个只会临时创建一个对象，这个对象就叫包装对象，包装对象使用完就被扔掉

alert( str.sayhi ) 上面那个用完就扔掉 这里就等于再创建一个新的包装对象

只有原始类型才有包装对象

构造函数创建

var str = new String( '123' );   显示创建
由构造函数创建出来的不会把对象扔掉，会存在，所以可以设置属性
str.sayhi = 'hi';

alert( str.sayhi  )  ===>弹出hi 

console.log( typeof str )  ===>弹出object
现在str保留对象

面向对象

以对象为核心去编写程序，就叫面向对象

• 面向过程区别：
  1、面向过程：整个程序有始有终的流程，强调过程。对象只是其中的一个组成部分
  2、区别：面向对象强调对象，面向过程强调过程
  例：
  面向对象：我 吃 （饭）；我是主体，吃是我的方法，饭是参数
  面向过程：吃（我，饭）；吃是主体，我和饭都是吃的参数；

  3、面向对象编程中也可能会使用面向过程编程

function feng( name, age, length ){
    var obj = {};    =====>创建对象  原料
        obj.name = name;
        obj.age = get;        
        obj.length = length;     =====> 加工
        obj.saylen = function (){
             alert( this.length )
       }
        return obj;     ======>返回对象  出厂
}


var  fy = feng( '风' , 15 , 20 )
var  ali = feng( '阿里' , 18 , 15 )

这就是工厂模式

new操作符的作用

1、会在被执行函数内部创建一个对象
2、函数内部的this指向了这个被new创建的对象
3、函数执行完返回这个对象

function Feng( name, age, length ){
      this.name = name;
      this.age = age;
      this.length = length;
      this.saylen = function (){
          alert( this.length );
    }
}

new Feng()  
会在内部创建一个对象 var obj = {};
执行完返回这个对象
return obj 

Feng() 自执行this指向window  上面的属性会挂在window下

构造函数

• 1、new 后面的函数 就是构造函数/类
  2、new 构造函数（）；这个构造函数被new执行的过程，叫做构造函数的实例化
  3、实例化时，返回的对象叫做：实例化对象
  4、写构造函数时，第一个字母大写（ 约定俗成 ）
  5、构造函数要先写在前面，先构造、后实例

原型：prototype

• 一般用来存放公共属性
  例如：一个宿舍都喜欢打篮球，没必要每个人都买一个，可以每个人出资公共买一个

function Feng( name, age, length ){
      this.name = name;
      this.age = age;
      this.length = length;
      this.saylen = function (){
          alert( this.length );
    }
}

var obj = new Feng( '阿里' ， 18 ， 10)
var obj2 = new Feng( '阿飞' ， 20 ， 8)
var obj3 = new Feng( '大狗' ， 10 ， 2)
var obj4 = new Feng( '二狗' ， 18 ， 10)
var obj5 = new Feng( '三狗' ， 18 ， 10)
var obj6 = new Feng( '四狗' ， 18 ， 10)

多次调用时里面的sayhi也会多次调用，这个每一个都一样，就可以存放在原型上做为公共的属性

function Feng( name, age, length ){
      this.name = name;
      this.age = age;
      this.length = length;
     
}
Feng.prototype.sayHi = function (){
    console.log( this.length );
}

原型上this指向

function Fn( name ){
    this.name = name;
}
Fn.prototype.ShowName = function (){
    console.log( this );
}
var aLi = new Fn( '阿里' );
aLi.ShowName()  ===>指向new出来的对象

重写原型链

实例化proto === 构造函数.prototype

• 原型链：
  1、每个对象都会有一个proto属性，指向其他构造函数的原型
  2、构造函数的原型又是一个对象，所以也有proto指向他的构造函数的原型，直到object.prototype上

• 从基础的对象一直顺着原型一层一层向上找原型的时，能形成一条链式结构，这条链叫原型链
  在寻找属性时，会优先在自己的私有属性寻找，没有找到就到父级找，还没有再往上，找到停止，直到最终原型，如果没有找到就是undefined

function Fn(){
      this.say = function (){
        alert( '私有属性' )
    }
}
Fn.prototype.say = function (){
        alert( '原型属性' )
}
var obj = new Fn();
obj.say() ===>弹出 私有属性 

hasOwnProperty判断某个属性是不是私有属性（不会去找原型上的）

function Fn(  ) {
           this.name = arguments[0];
           this.age = arguments[1];
       }
       Fn.prototype.say = function (){
           console.log( this.name )
       }
       var x = new Fn();
       console.log ( x.hasOwnProperty( 'name' ))
        如果有这个属性返回true

原型重写

function Fn(){
    this.name = 'abc';
}
Fn.prototype.say = function (){
      console.log( 'hello' )
}
Fn.prototype.say2 = function (){
      console.log( 'hello2' )
}

====> 可以写成

Fn.prototype = {
    say: function (){
         console.log( 'hello' );
    },
    say2: function (){
         console.log( 'hello2' );
    }
}
Fn.prototype.constructor = Fn; //上面会把constructor（指向构造函数删掉  这里要添加上去）

var x = new Fn();

a.say() ===>打印 hello

继承

子类继承父类

• 1、儿子可以继承父亲所有；
  2、儿子扩展不能影响父级

function Fn(){
            this.name = arguments[0];
            this.age = arguments[1];
        }
        Fn.prototype.say = function (  ) {
            console.log( this.name );
        }
        function Fn2(  ) {
            this.length = arguments[2];
            this.name = arguments[3];
            Fn.call( this ,arguments[0],arguments[1] ); //让Fn执行 并改变this 指向现在这个函数的this
        }
        for (var key in Fn.prototype ){
            Fn2.prototype[key] = Fn.prototype[key];  // 继承原型上的属性
        }

        var x = new Fn2( '阿里' , 20 , 10)
        console.log( x );

image.png

多态

根据给定参数的不同，函数会做出不同的反馈

var tMap = {
                show : function (){
                    console.log( '调用tencent地图' )
                }
            }
            var gMap = {
                show : function (){
                    console.log( '调用google地图' )
                }
            }
            var bMap = {
                show : function (){
                    console.log( '调用baidu地图' )
                }
            }
            //使用工具
            var remderMap = function ( obj ){
                if( typeof obj.show === 'function' ){
                    obj.show();
                }
            }

静态属性

          function Fn(){
                //私有属性
                this.name = '阿里';
            }
            // 静态属性
            Fn.age = '5555'; // 私有属性跟公有属性实例化后都可以看得到  如果不想让暴露出来就可以 用静态属性
            var x = new Fn();
            console.log( x ) // 这里看不到静态属性
            
            console.log( Fn.age ) // 在函数下才能访问到