包装对象
原始类型（字面量\值类型）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 ) // 在函数下才能访问到
