渡一教育公开课web前端开发JavaScript精英课学习笔记（八）对象、原型

原型

原型是构造函数 Function的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。利用原型的特点和概念，可以提取共有属性。

对象的有个隐式的属性：__proto__ ，指向构造函数的原型 Function.prototype

对象原型具有指向构造函数的属性：constructor。

<script type = "text/javascript">
	//函数的原型，相当于对象继承至其它对象的属性和方法
	Car.prototype ={
		carName : "BMW",
		heitht : 1400,
		lang : 4900,
		run : function(){
			console.log("Runing !!");
		}
	}
	Car.prototype.width = 1600;
	function Car(color,owner){
		//new 对象时 创建 this 属性
		//this 属性默认添加 __proto__ 属性（这里存对象的原型）
		//this 属性默认添加 constructor 属性（这里存对象的构造函数）
		this.owner = owner;
		this.color = color;
	}
	var car = new Car("red","sunny");
	console.log("car.__proto__",car.__proto__);//获取对象的原型
	console.log("car.constructor",car.constructor);//获取对象的构造函数
	function Person(){}
	var per = new Person();
	console.log("per.__proto__",per.__proto__);//获取对象的原型
	console.log("per.constructor",per.constructor);//获取对象的构造函数
</script>

原型链

对象的 prototype 的 prototype 的 prototype ……Object 的 prototype （等于null，null 无原型，最后一级）。这种关系就是原型链。

<script type = "text/javascript">
	//原型链的演示，
	//原型可以从最后一级访问到顶级，访问子对象的属性时，如子对象没有这个属性，去查询父对象，直到找到属性并返回。
	//原型链最顶级对象为 Object
	Grand.prototype.lastName = "Zhang"
	function Grand(){this.another = "yeye";}
	var grand = new Grand();
	Father.prototype = grand;
	function Father(){this.firstName = "jiayi";}
	var father = new Father();
	Son.prototype = father;
	function Son(){this.like = "play game";}
	var son = new Son();
	console.log(son.like,son.firstName,son.another,son.lastName);//获取属性值，在原型链上各层级对象的属性值。
	console.log(son.toString());//会调用原型链上的Object对象的方法。
	console.log(son);//可以在控制台上查询到原型链的结构。对象的__proto__属性
</script>

通过原型创建对象

<script type = "text/javascript">
 	Father.prototype.lastName = "Zhang"
	function Father(){this.another = "baba";}
	var Father = new Father();
	var son = Object.create(Father);//通过原型创建一个对象，创建的对象的原型就是传入的参数
	var son = Object.create(null)//创建一个无原型的对象。
	//null undefined 无原型
	//包装类 Number String Boolean 等有原型
</script>

重写原型的属性和方法

<script type = "text/javascript">
 	Father.prototype={
		 toString:function(){//如果不写这个方法，将访问Object的toString方法。
			 return "返回新的信息";
		 }
	 }
	function Father(){}
	var father = new Father();
	console.log(father.toString());
</script>

Call/apply

可修改this指向

通过call /apply可以给 obj 对象添加 Person 的属性，差别在于传参方式，call传一个对象和多个参数，apply传一个对象和一个参数数组。

<script type = "text/javascript">
	function Person(name,age){
		//call 调用后 this => obj
		this.name = name;
		this.age = age;
		this.play = function(){
			console.log(this.name + " play !")
		}
	}
	var per = new Person('zhang',18);
	var obj = {phone:133}
	var obj1 = {phone:133}
	console.log(obj);
	Person.call(obj,'li',20);//通过call 可以给 obj 对象添加 Person 的属性。
	Person.apply(obj1,['li',20]);//通过apply 可以给 obj 对象添加 Person 的属性。
	console.log(obj);
	console.log(obj1);
	obj.play();
	obj1.play();
	//通过call 可以给 Student 添加 Person 的属性。		
	function Student(name,age,techer){
		Person.call(this,name,age);
		this.techer = techer;
		this.study = function(){
			console.log(this.name + " study !")
		}
	}
	//通过apply 可以给 Student 添加 Person 的属性。		
	function Student1(name,age,techer){
		Person.apply(this,[name,age]);
		this.techer = techer;
		this.study = function(){
			console.log(this.name + " study !")
		}
	}
	var stu = new Student("wang",12,"liu");
	var stu1 = new Student1("wang",12,"liu");
	console.log(stu);
	console.log(stu1);
	stu.play();
	stu.study();
	stu1.play();
	stu1.study();
  </script>