js面向对象编程_the black cat js 对象编程-CSDN博客

1.JavaScript面向对象

javascript是一种基于对象的语言，你遇到的所有东西几乎都是对象。但是，他又不是一中真正的面向对象编程（OOP）语言，因为他的语法中没有class(类)

2.封装- 生成对象的原始模式

var Cat={name:"",color:""}

var Cat1={};//创建一个空对象

cat1.name="大毛"；//赋值

cat1.color=“黄色”；

var cat2={}

cat2.name="二毛"；

cat2.color="黑色"；

问题：

-如果多生成几个实例，写起来就非常麻烦

-实例与原型之间，看不出有什么联系

3.封装-构造函数模式

-为了解决从原型对象生成实例的问题，js提供了一个构造函数模式。

-所谓构造函数，其实就是一种不同函数，但是内部使用了this变量对构造

函数使用new运算符，就能生成实例，且this变量会绑定在实例对象上

例：

function Cat(name,color)

{

this.name=name;

this.color=color;

}

var cat1=new Cat("大毛"，“黄色”)

alert（cat1.name）;

alert(cat1.constructor==Cat);//constructor属性构造

例：

function Cat（name,color）

{

this.name=name;

this.color=color;

this.type="猫科动物"；

this.eat=function ()

{

alert("吃老鼠");

}

var cat1=new Cat("大毛"，“黄色”)；

var cat2=new Cat("二毛"，“黑色”)；

alert（cat1.type）；//猫科动物

cat1.eat();//吃老鼠

alert（cat1.eat==cat2.eat）//false;因为cat1.eat与cat2.eat它们是占有不同的空间的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>
	
<body>
<script>
	function Cat(name,color)
	{
			this.name=name;
			this.color=color;
			this.type="猫科动物";
			this.eat=function()
			{
				alert("吃老鼠");
			}
	}
	var cat1=new Cat("大毛","黄色");
	var cat2=new Cat("二毛","黑色");
	cat1.eat();
	cat2.eat();
	alert(cat1.eat==cat2.eat);
</script>
</body>
</html>

问题:

-那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，

都必须为重复的内容，多占用一些内存。这样既不环保，也缺少效率。

-能不能让type属性和eat()方法在内存只生成一次。然后所有实例都指向同一个地址呢》

回答是可以的。

4.封装-Prototype模式

-Javascript规定，每一个构造函数都有一个prototype属性和方法，都会被构造函数的实例继承

-这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

例:

function Cat(name,color)

{

this.name=name;

this.color=color;

}

Cat.prototype.type="猫科动物"；

Cat.prototype.eat=function(){alert("吃老鼠")}；

var cat1=new Cat("大毛"，“黄色”)；

var cat2=new Cat("二毛"，“黑色”)；

alert（cat1.type）;//猫科动物

cat1.eat()//吃老鼠

alert（cat1.eat==cat2.eat）//true;

-所有实例的type属性和eat()方法是同一个地址，指向prototype对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script>
    	function Cat(name,color)
		{
			this.name=name;
			this.color=color;
		}
		Cat.prototype.type="猫科动物";
		Cat.prototype.eat=function()
		{
			alert("吃老鼠");	
		}
			var cat1=new Cat("大毛","黄色");
			var cat2=new Cat("二毛","绿色");
			cat1.eat();
			cat2.eat();
			alert(cat1.eat==cat2.eat);
    </script>
</body>
</html>

5. 继承构造函数绑定

function Animal（）

{

this,species="动物"；

}

function Cat(name,color)

{

Animal.apply(this.arguments);

this.name=name;

this.color=color;

}

var cat1=new Cat("大毛"，“黄色”)；

alert（cat1.species）;//动物

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script>
    	function Animal()
		{
			this.species="动物";
		}
		function Cat(name,color)
		{
			Animal.call(this);
			this.name=name;
			this.color=color;
		}
		var cat1=new Cat("大黄","绿色");
		alert(cat1.name+" "+cat1.species);
    </script>
</body>
</html>

6.继承-prototype模式

function Animal（）

{

this,species="动物"；

}

function Cat(name,color)

{

this.name=name;

this.color=color;

}

Cat.prototype=new Animal();

Cat.prototype.constructor=Cat;

var cat1=new Cat("大毛"，“黄色”)；

alert（cat1.species）;//动物

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script>
    	function Animal()
		{
			this.species="动物";
		}
		function Cat(name,color)
		{
			Animal.call(this);
			this.name=name;
			this.color=color;
		}
		Cat.prototype=new Animal();
		Cat.prototype.constructor=Cat;
		var cat1=new Cat("大毛","black");
		alert(cat1.name+" "+cat1.species);
    </script>
</body>
</html>