js面向对象介绍

面型对象介绍

面向对象编程需要我们掌握：‘’对象、类、实例“的概念

• 对象：万物皆对象
• 类：对象的具体细分(按照功能特点进行分类：大类、小类）
• 实例：类中具体的一个事物（拿出类别中的具体的一个实例进行研究，那么当前类别下的其他类的实例也具备这些特点个特征）

整个js就是基于面向对象设计的个开发的出来的语言，我们学习和实战的时候也要按照面向对象的思想去体会和理解。

基于构造函数创建自定义类（constructor）

• 在普通函数执行的基础上”new xxx()“，这样就不普通函数执行了，而是构造函数执行，当前的函数名称之为”类名“，接受的返回结果是当前类的一个实例。

• 自己创将的类名，最好第一个首字母大写

• 这种构造函数设计模式执行，主要用户组件、类库、插件、框架的封装，平时编写业务逻辑一般不这样处理

  function Fn(){};
  var f1=new Fn();//Fn是类 f1是类的实例
  var f2=new Fn();//发f2也是Fn的实例，他是和f1是分开独立的，互不影响
  

js中创建值又两种方法

• 字面量表达式

• 构造函数模式

  var obj={};//字面量创建
  var obj=new Object();//构造函数
  

  不管哪种方式创建出来的都是Object类的实例，而实例之间是独立分开的

基本数据类型基于两种不同的模式创建出来的值不一样

• 基于字面量方式创建出来的值是基本数据类型

• 基于构造函数创建出来的值是引用数据类型

  var num1=12;
  var num2=new Number(12);
  console.log(typeof num1);//"number"
  console.log(typeof num2);//"object"
  

构造函数执行步骤（四步）

• 跟普通函数执行一样，形成一个私有作用域（栈内存）

  • 形参赋值
  • 变量提升

• [构造函数执行独有]在js中代码自上而下执行之前，首先在当前形成一个栈中创建一个对象（创建一个堆内存，暂时不存储任何东西），并且让函数中执行主体（this）执行这个堆内存（this===新创建的对象）

• 代码自上而下执行

• [构造函数独有]代码执行完毕，把之前创建的堆内存(也是就是this)地址返回(浏览器默认返回)

  function Fn(){
  	var n=10;
  	this.m=n
  };
  var f=new Fn();
  console.log(f.m); // 10
  console.log(f.n); // undefined
  

构造函数执行，不写return浏览器默认返回创建的实例，但是如果我们自己return(返回)会发生什么?

• 如果自己return(返回)的是一个基本数据类型，返回的结果依然是类的实例（this），没有任何影响

  function Fn(){
  	this.name='teal';
  	return 12;
  };
  var f=new Fn();
  console.log(f);//{name:'teal'}
  console.log(f.name);//"teal"
  

• 如果返回的是引用数据类型值，则会把默认返回的实例覆盖，此时接收到的结果就不是当前类的实例了（不再是this,而是我们自己返回的引用数据类型值），所以我们在构造函数中，应尽量避免return的使用，防止覆盖实例

  function Fn(){
  	this.name='teal';
  	return {age:20};
  };
  var f=new Fn;//如果构造函数没有实参传递可以不写括号
  console.log(f);//{age:20}
  console.log(f.name);//undefined
  console.log(f.age)// 20
  

instanceof：检测某一个实例是否隶属于这个类

• 检测如果属于这个类返回true,不属于返回false

• 万物皆对象，所有的对象包含创建的实例都是Object的实例

  function Fn(){
      this.m=10;
  };
  var f=new Fn();
  console.log(f instanceof Fn);//true
  console.log(f instanceof Array);//false
  console.log(f instanceof Object);//true
  

in:检测当前对象是否存在某一个属性

• 不管这个属性是对象的私有属性还是公有属性，只要有结果都为true,否则为false

  function Fn(){	
  	var n=10;
  	this.m=n;
  };
  var f=new Fn();
  console.log('m' in f);//true
  console.log('n' in f);// false 
  console.log('toString' in f);// true (toString为供有属性)
  

hasOwnproperty:检测当前属性是否为对象的私有属性

• 不仅要包含这个属性，而且必须还是私有属性的才为true,否则为false

  function Fn(){
      var n=10;
      this.m=n;
  };
  var f=new Fn();
  console.log(f.hasOwnProperty('m'));//true
  console.log(f.hasOwnProperty('n'));//false
  console.log(f.hasOwnProperty('toString'));//false(虽然toString有这个属性，但是他不是私有属性)