浅谈JS的面向对象

最新推荐文章于 2021-06-18 01:07:50 发布

TAT0_0

最新推荐文章于 2021-06-18 01:07:50 发布

阅读量292

点赞数

本文链接：https://blog.csdn.net/yesbuy201701/article/details/73823410

版权

ECMAScript有两种开发模式：1.函数式(过程化)，2.面向对象(OOP)。面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是，ECMAScript没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。

1.什么是对象
简单来说，一切事物皆对象，比如电视机就是一个对象，很具体的一个实例。
创建对象
创建一个对象，然后给这个对象新建属性和方法（其实就是挂载在某个对象上面的变量和函数）。

var box = new Object();   //创建一个 Object对象
box.name = 'Lee';//创建一个 name属性并赋值
box.age = 100;//创建一个 age属性并赋值
box.run = function () {//创建一个 run()方法并返回值
    return this.name + this.age + '运行中...';
};
alert(box.run());//输出属性和方法的值

上面创建了一个对象，并且创建属性和方法，在 run()方法里的 this，就是代表 box对象本身。这种是 JavaScript创建对象最基本的方法，但有个缺点，想创建一个类似的对象，就会产生大量的代码。

2.什么是面向对象（是一种思想）
（1）使用对象时，只关注对象提供的功能，不关注其内部细节，比如JQ；
（2）在JS中，要学会构造新的对象。

3.面向对象编程（OOP）的特点
（1）抽象：抓住关键需要的点（比如员工工资发放系统，只需要知道名字，工号就可以，不需要身高，体重之类的属性）；
（2）继承：父亲有一些功能，儿子继承了这些功能。儿子还可以根据自己的需要有些新的功能和特征。目的是为了最大目的的重用代码；
（3）封装：把功能写出方法，jq就是面向对象写法；
（4）多态：例如组件开发。

4.this的含义
this 其实就是代表当前作用域对象的引用。如果在全局范围 this 就代表 window 对象，如果在构造函数体内，就代表当前的构造函数所声明的对象。
简单来说，当前的这个方法属于谁的，this就指谁。见下面代码。

var arr = [1,2,3];
arr.a = 12;
arr.show = function(){ //这个function属于arr的，所以this指的是arr
alert(this.a); //弹出12

5.构造函数
构造函数就是构造对象的函数。

构造函数模式

function Box(name, age) {//构造函数模式
    this.name = name;
    this.age = age;
　　this.run = function () {
    　　return this.name + this.age + '运行中...';
　　};
}
var box1 = new Box('Lee', 100);
var box2 = new Box('Jack',200);
alert(box1.run());
alert(box1 instanceof Box); //很清晰的识别他从属于Box

工厂模式

function createObject(name, age) { //集中实例化的函数
  var obj = new Object();
　　obj.name = name;
　　obj.age = age;
   　　 obj.run = function () {
   　　　　 return this.name + this.age + '运行中...';
　　　　};
　　return obj;
}

var box1 = createObject('Lee', 100);//第一个实例
var box2 =createObject('Jack',200);//第二个实例
alert(box1.run());   //Lee100运行中...
alert(box2.run());   //Jack200运行中...
//保持独立
var obj = fn("one","eat") //没有new关键字
var obj2 = fn("two","eat")
alert(obj.yongchu == obj2.yongchu) //false功能一样却不相等，同样功能占用了更多的内存，浪费。

工厂方式的缺点
1.没有new。
2.不同对象具有相同方法时，方法却不相等，代码虽然封装了，但是在对象调用方法的过程中，其实是另外的一个代码段。浪费内存，造成系统资源的浪费。

使用了构造函数的方法，和使用工厂模式的方法他们不同之处如下：
1.构造函数方法没有显示的创建对象(new Object())；
2.直接将属性和方法赋值给 this 对象；
3.没有 renturn 语句。

构造函数的方法有一些规范：
1.函数名和实例化构造名相同且大写，(PS：非强制，但这么写有助于区分构造函数和普通函数)；
2.通过构造函数创建对象，必须使用 new 运算符。

6.原型
原型可以用来构造属性和方法，让属性和方法变成公用的代码；内存当做节约资源，提供系统性能；
我们创建的每个函数都有一个 prototype(原型)属性，这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解：prototype 通过调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。
原型模式的执行流程：
1.先查找构造函数实例里的属性或方法，如果有，立刻返回；
2.如果构造函数实例里没有，则去它的原型对象里找，如果有，就返回；
混合方式+原型去写构造函数:弥补了工厂方式的不足

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">         
            function Creat(nam,se){//构造函数：加属性
                //var this=new Object();
                this.name=nam;
                this.sex=se;
                //return this;
            }

            //原型：加方法            
            Creat.prototype.showName=function(){
                alert(this.name);
            }
            Creat.prototype.showSex=function(){
                alert(this.sex);
            }

            //使用：用类去创建实例            
            var p1=new Creat('张三','男');
            var p2=new Creat('李四','男');         
            p1.showName();//对象名.方法名     
        </script>
    </head>
    <body>
    </body>
</html>

TAT0_0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈JS的面向对象

ECMAScript有两种开发模式：1.函数式(过程化)，2.面向对象(OOP)。面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是，ECMAScript没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。1.什么是对象简单来说，一切事物皆对象，比如电视机就是一个对象，很具体的一个实例。创建对象创建一个对象，然后给这个对象新建属性和方
复制链接

扫一扫