JavaScript的面向对象

目录

编程思想

面向对象的特性

创建对象的几种方式

1.字面量方式创建对象

2.工厂模式进行创建

3.构造函数方式创建对象

4.原型模式创建对象

 JavaScript数据类型检测

原型链

原型

原型链

面向对象选项卡 

 面向对象拖拽实现（屏幕上拖动）

继承的几种方式

原型继承

call继

冒充对象继承

寄生组合继承

---

javaScript中一切皆对象

编程思想

在JavaScript中有两种编程思想 面向过程 和 面向对象

• 面向过程（POP）:先做第一步，然后第二步依次类推... 例如ATM机取款：1.插卡 2.输密码 3.选金额 4.拿钱....

• 面向对象 （OOP）: 不关心具体实现过程，关心的最终的结果 公司的董事长 关心的公司整体运营情况

JavaScript在ES6以前不能称之为一门真正的面向对象语言，只是具备面向对象的特性（ES6以后可以称之为一门真正的面向对象语言）

面向对象的特性

• 继承：子类继承父类的属性或方法

• 封装：将实现同样功能的代码段，放到一个方法中，用到了调用即可，屏蔽代码实现细节，实现"高内聚，低耦合"

• 多态:

  • 重载：js中没有重载，只有重载（函数名相同，根据传递参数不同实现不同的功能）

  • //java
    public void function sum(String[] args){
         //功能1
    } 
    
    public void function sum(Number[] args){
          //功能2
    } 
    
    //不会覆盖，传递参数类型不同去执行不同的功能

• 重写：子类重写父类的属性或方法

// 父类
function A(x, y) {
    this.x = x;
    this.y = y;
}

A.prototype.getX = function () {
    console.log(this.x);
}

A.prototype.getY = function () {
    console.log(this.y);
}


console.log(A.prototype);

var a = new A(300,200);
console.log(a);


// 子类
function B(z) {
    this.z = z;

    A.call(this, 100, 200);
}

// 将子类的原型指向父类的原型
B.prototype = A.prototype;  //B的prototype属性 和 A.prototype指向同一块堆内存


var b = new B(1000);
console.log(b);

// 重写：子类重写父类的属性或方法

// 重新私有的
b.z = "hello";
b.x = 6666;

// 重写公有的
b.__proto__.getX = "哈哈哈";

console.log(b);
console.log(a);

创建对象的几种方式

1.字面量方式创建对象

• 优点： 划分命名空间，属性都是私有的，不会发生冲突

• 缺点： 属于手工作业模式 ,不能批量生产

var obj1 = {
    name: "张三",
    introduce: function() {
        // console.log("我叫"+obj1.name);
        console.log("我叫" + this.name);
    }
};

obj1.introduce();


var obj2 = {
    name: "李四",
    introduce: function() {
        // console.log("我叫"+obj1.name);
        console.log("我叫" + this.name);
    }
};

obj2.introduce();

2.工厂模式进行创建

• 优点： 划分命名空间，属性都是私有的，可以实现批量生产（封装）

• 缺点：不能实例识别

function People(name,age){
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.introduce = function(){
        console.log("我是"+this.name+",我今年"+this.age+"岁~~~");
    }

    return obj;
}

var people1 = People("张三",100);
var people2 = People("李四",200);
console.log(people1,people2);
people1.introduce();
people2.introduce();

console.log(people1 instanceof People);//false
console.log(people2 instanceof People);//false

3.构造函数方式创建对象

• 优点：划分命名空间，属性都是私有的，可以实现批量生产（封装），可以实例识别

• 缺点：不能实现公有

// new 函数（类）  ->首先将当前函数执行   然后这个函数中的this就是一个空对象，这个空的对象就是当前这个类的实例 
		// new 函数（类） 函数内部自动创建一个空对象  最后帮我们返回到函数外界
		function People(name, age) {
			console.log(this); //->{}

			// 给这个空的对象增加属性和值
			this.name = name;
			this.age = age;
			this.introduce = function () {
				console.log("我是" + this.name + ",我今年" + this.age + "岁~~~");
			}
		
		}

		var people1 = new People("张三", 40);
		var people2 = new People("李四", 60);
		console.log(people1, people2);
		people1.introduce();
		people2.introduce();

		console.log(people1 instanceof People); //true
		console.log(people2 instanceof People); //true




		var arr = new Array(10,20,30);
		var arr1 = new Array(10,20,30);
		console.log(arr,arr1);

		var str1 = new String("哈哈哈哈");
		console.log(str1);