javascript 创建对象——类，继承

a.本文所有代码在chrome浏览器下测试通过,建议读者也安装一个chrome浏览器;

b.本文所述遵循ECMA-262第五版规范

c.本文输出使用console.log函数,请按F12进入调试模式,观看控制台输出;

e.转载请注明出处.

1.什么是对象?

2.如何创建对象？

exampleA:

exampleD:

//如果是简单的对象,似乎exampleA是最方便的,但当你要创建复杂的对象,亦或是大量类似的对象时,就应当考虑下面这个方法了.

function Dog(name, color) {

经过以上步骤,一个新的对象就创建出来了.

构造函数与其他函数有什么区别么?!
唯一区别是你在调用构造函数上需要使用new关键字,但在语法上并没有区别,所有的函数都有prototype和this引用,构造函数只是定义的时候通常首字母大写,调用的时候记得使用new关键字,但这都靠自觉,javascript本身没有语法强制规定什么样的函数才是构造函数.你不用new关键字调用构造函数（非strict mode）亦或你new一个普通的函数也不会报错,当然,结果自然不是你想要的（后面会讲会发生什么）.

this是什么东西?!

this是function内部的一个引用,跟其他OO语言类似,它指向函数据以执行的对象.所有的函数都有这么一个引用.

什么叫据以执行的对象?!

不太好形容这个东西,大概可以理解为,这个函数运行在哪个对象之下（还是不大好理解）,直接举例吧.

	//输出自己的this
	function log_this() {
		console.log(this);
	}

	//初始化
	window.onload = function() {
		
		//example_one
		log_division("example_one");
		log_this();//window对象
		//example_two假设你有一个btn按钮    
		document.getElementById("btn").onclick = log_this;//点击-->dom对象
		//example_three
		log_division("example_three");
		var temp = {};//exampleA中创建对象的方法哦
		temp.logThis = log_this;//function也是对象,可以这么给对象添加function属性,上面那个onclick监听回调函数的原理,跟这个类似
		temp.logThis();//Object    
	}

你可以这样：

	function Dog(name, color) {
		this.name = name;
		this.color = color;
		this.sayName = function(){
			console.log(this.name);
		};
	}

前文说过,function也是对象,这就相当于在执行构造函数的过程中,给对象增加了一个类型为function的sayName属性,但这样做有一个问题,就是每次执行构造函数的过程中,都会创建一个新的函数对象,显然,所有的Dog对象共享一个sayName函数就可以了.按照目前所讲的知识,你自然可以这样：

	function Dog(name, color) {
		this.name = name;
		this.color = color;
		this.sayName = sayName;
	}
	function sayName() {
		console.log(this.name);
	}

3.prototype!!!!!

	function Dog(name, color) {
		this.name = name;
		this.color = color;
	}
	Dog.prototype.sayName = function() {
		console.log(this.name);
	};
	var myDog = new Dog("Odie", "Yellow");
	myDog.sayName();//Odie

每一个对象都有一个指向它的构造函数的prototype的隐性的引用（在构造的时候被赋值）.

什么是隐性引用,就是你无法看到的,你无法使用myDog.prototype这样的方式获取prototype（在firefox和chrome中可以通过myDog.__proto__来访问）.但是你却可以使用它的属性！所以你可以使用"myDog.sayName();"这种方式调用构造函数Dog的prototype的sayName函数.

	function Dog(name, color) {
		this.name = name;
		this.color = color;
	}

	Dog.prototype.sayName = function() {
		console.log(this.name);
	};

	Dog.prototype.kind = "Dog";

	var myDog = new Dog("Odie", "Yellow");
	var youDog = new Dog("Oalive", "Black");

	//通过对象读取
	console.log(myDog.kind);//Dog
	console.log(youDog.kind);//Dog

	//但不能通过对象修改prototype属性
	myDog.kind = "cat";
	console.log(myDog.kind);//cat
	console.log(youDog.kind);//dog

在最初讲对象的时候,特意强调了一下,访问一个对象的属性时,如果没有,并不会给对象追加一个属性,当时没有说后半句,后半句就是它会继续向它所指向prototype对象查找.这是javascript对访问属性时的处理方式.

而赋值操作呢,不会有这个查找的过程,如果没有,直接追加一个属性!所以myDog1.kind = "dog";这是给myDog1追加了一个kind属性,而对myDog1访问kind属性时,在自身就找到了这个属性,自然就不会继续查找了.

	//父构造函数
	function SuperType(name) {
		this.name = name;
	}
	//子构造函数
	function SubType(name, age) {
		SuperType.call(this, name);//调用父构造函数
		this.age = age;
	}


	var sub = new SubType("js", 20);
	console.log(sub.name);//js
	console.log(sub.age);//20
	console.log(sub.hasOwnProperty("name"));//true
	console.log(sub.hasOwnProperty("age"));//true

	//父构造函数
	function SuperType(name) {
		this.name = name;
	}

	SuperType.prototype.sayName = function() {
		console.log(this.name);
	}
	//子构造函数
	function SubType(name, age) {
		SuperType.call(this, name);//调用父构造函数
		this.age = age;
	}

	SubType.prototype = Object.create(SuperType.prototype);

	SubType.prototype.sayAge = function() {
		console.log(this.age);
	}

	var sub = new SubType("js", 20);
	console.log(sub.name);//js
	console.log(sub.age);//20
	sub.sayName();//js
	sub.sayAge();//20

	console.log(sub.constructor);//function SuperType{...}

只要给SuperType.prototype加一个constructor属性就可以了.

继承就这样完成了~

javascript 创建对象——类，继承,古老的榕树,5-wow.com