JS(面向对象)

最新推荐文章于 2024-02-28 23:59:43 发布

小梦新靓

最新推荐文章于 2024-02-28 23:59:43 发布

阅读量170

点赞数

分类专栏： js1

js1 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、什么是面向对象？

1.1、对象：对象就是封装数据和数据操作的封装体
1.2、面向对象：使用对象时，只关注对象提供的功能，不关注其内部细节。比如电脑——有鼠标、键盘，我们只需要知道怎么使用鼠标，敲打键盘即可，不必知道为何点击鼠标可以选中、敲打键盘是如何输入文字以及屏幕是如何显示文字的。总之我们没必要知道其具体工作细节，只需知道如何使用其提供的功能即可，这就是面向对象。
1.3、js对象的组成：属性和方法----属性是对象的状态，方法是对象的行为（完成某种任务）。

二、如何创建对象

创建对象-方法1–new

    // 创建一个新对象
            var person = new Object();
    //为person对象添加属性
            person.name = "jiangzhou";
            person.age = 22;
   //为person对象添加方法
            person.showName = function(){
                alert("姓名："+this.name);
            }
            person.showAge = function(){
                alert("年龄："+this.age);
            }
     //调用对象的方法
            person.showName();
            person.showAge();

缺点：用着类方法，并没有减少代码量，而且key值一样方法也类似创建一个新对象new Object()创建出来的对象几乎是空白的，需要自己添加属性，方法

创建对象-方法2

	 var person3={
			 		name:'李四',
				 	age:23,
				 	run:function(){
				 		console.log('冷孙的跑');
				 	}
			 };

这个方法和上面类似比较囊肿，并没有优化代码，需要类似的对象都得自己创建

创建对象-方法3
工厂模式：工厂，简单来说就是投入原料、加工、出厂。
用一个带参的函数进行创造，然后把上面的创建对象的样子放进去，利用形参来给属性进行赋值

<!DOCTYPE html>
<html>
    <meta charset="UTF-8" />
    <head>
        <script>
            //构造函数：工厂
            function createPerson(name, age){
                var person = new Object();
   
                //原料
                person.name = name;
                person.age = age;
                
                //加工
                person.showName = function(){
                    alert("姓名："+this.name);
                }
                person.showAge = function(){
                    alert("年龄："+this.age);
                }
                //出厂
                return person;
            }
            //创建两个对象
            var p1 = createPerson("jiangzhou", 22);
            var p2 = createPerson("tom", 20);
            
            //调用对象方法
            p1.showName();
            p1.showAge();
            
            p2.showName();
            p2.showAge();
            
        </script>
    </head>
</html>

缺点：但是，这种方式有两个缺点：
①一般我们创建对象是通过new来创建，比如new Date()，这里使用的是方法创建。使用new来创建可以简化一些代码，也带来一些新的特性。
②每个对象都有一套自己的方法，浪费资源(虽然对于现在的计算机来说不算什么，但我们尽量将设计做到最好就行了)。
这里为什么说每个对象都有自己的一套方法呢，是因为创建function()的时候其本质是通过new Function()来创建的，会诞生一个新的函数对象，所以每个对象的方法是不一样的，这样就存在资源浪费的问题了。看第25行代码。

创建对象–方法4

<!DOCTYPE html>
//创建对象
function Map(){//属性
	this.width=800;
	this.height=600;
	this.color='green';
	//当没有创建时候给该地图属性赋值为空
	this.div_map=null;
	//方法
	this.snake_map=function(){
		this.div_map=document.createElement("div");
		this.div_map.style.width=this.width+'px';
		this.div_map.style.height=this.height+'px'
		this.div_map.style.backgroundColor=this.color;
		this.div_map.style.margin="100px auto";
		this.div_map.style.position="relative"
		//
		document.getElementsByTagName("body")[0].appendChild(this.div_map);
	}
}
//对象谁用：用new
var map1=new Map;
//map1就是被实例化的的对象

缺点：里面函数不会重用，每创建一个它里面的代码都会重复但是却不一样，就相当于你在两个盒子里放了两个一样的苹果但是苹果却不一样

创建对象-方法5

4.在function原型(prototype)上进行扩展 —— 最终版
原型添加的方法不会有多个副本，不会浪费资源，所有的对象只有一套方法。至于为什么是用的一套方法呢，看第31行代码：因为所有的方法都等于原型上的方法

<!DOCTYPE html>
<html>
    <meta charset="UTF-8" />
    <head>
        <script>
      
            function Person(name, age){
                //属性：每个对象的属性各不相同
                this.name = name;
                this.age = age;
            }
            //在原型上添加方法，这样创建的所有对象都是用的同一套方法
            Person.prototype.showName = function(){
                alert("姓名："+this.name);
            }
            Person.prototype.showAge = function(){
                alert("年龄："+this.age);
            }
            
            //创建两个对象
            var p1 = new Person("jiangzhou", 22);
            var p2 = new Person("Lyli", 20);
            
            alert(p1.showName == p2.showName); //true
            //这里为什么两个对象的方法是相等的呢，可以看成如下
            alert(p1.showName == Person.prototype.showName); //true
            
        </script>
    </head>
</html>

小梦新靓

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS(面向对象)

一、什么是面向对象？1.1、对象：对象就是封装数据和数据操作的封装体1.2、面向对象：使用对象时，只关注对象提供的功能，不关注其内部细节。比如电脑——有鼠标、键盘，我们只需要知道怎么使用鼠标，敲打键盘即可，不必知道为何点击鼠标可以选中、敲打键盘是如何输入文字以及屏幕是如何显示文字的。总之我们没必要知道其具体工作细节，只需知道如何使用其提供的功能即可，这就是面向对象。1.3、js对象的组成：属...
复制链接

扫一扫

专栏目录