JavaScript面向对象的概念

JavaScript面向对象的概念

一切事物皆对象,面向对象是一种思维方法。面向对象是把要实现的效果分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。
而JavaScript语言是通过一种叫做 原型(prototype)的方式来实现面向对象编程的。基于原型的面向对象方式中,对象(object)则是依靠 构造器(constructor)利用 原型(prototype)构造出来的。

创建对象的方式

1、字面量形式

<script type="text/javascript">
    //用大括号括起来就构成了JavaScript对象。这种对象称之为字面量对象。
    var person = {
        name : "张三",    
        age : 20,
        sex : "男",
        eat : function () { //属性的值是函数,这个属性称之为方法。
            alert("吃东西");
        }
    }
</script>

1.1、访问对象的属性
[JavaScript] 提供了灵活的机制来修改对象的行为,可以动态添加、修改、删除属性(delete)和方法。

alert(person.name);  // 访问person对象的 name属性值
person.age = 30;  //修改person对象的 age 属性
person.like = "敲代码";//如果不存在这个属性,就给这个对象添加这个属性,并赋值
delete person.age;//使用delete操作关键字,删除person对象的属性age
person.eat();  //既然是调用方法(函数) 则一定还要添加 ()来表示方法的调用

1.2、for...in可以用来遍历对象的所有属性

// 在用for...in遍历的时候, in前面的变量pn指的是属性的名称。
for (pn in person) {
    alert(pn + " " + person[pn]);
}

2、构造函数创建对象

<script type="text/javascript">
    function Person (name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.eat = function () {
            alert(this.name + "在吃东西");
        }
    }
    var p1 = new Person("张三", 20, "男");//必须使用关键字new ,后面跟着构造函数的名,
                                          //根据需要传入相应的参数。
    p1.eat();   //张三在在吃东西
    var p1 = new Person("李四", 30, "男");
    p1.eat();   //李四在在吃东西
    alert(p1 instanceof Person);    //
</script>
函数的原型对象

在你声明一个函数时,函数会在浏览器默认的生成这个函数的原型对象,而且它会有一个默认的属性prototype这个属性指向这个原型对象,而原型对象有一个默认属性constructor指向这个函数

<body>
    <script type="text/javascript">
        /*
            声明一个函数,则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
            创建一个对象,这个对象就是这个函数的原型对象,prototype属性指向这个原型对象。这个原型对象
            有一个属性叫constructor 指向了这个函数
            
            注意:原型对象默认只有属性:constructor。其他都是从Object继承而来,暂且不用考虑。
        */
        function Person () {
    
        }       
    </script>
</body>

当把一个函数作为构造函数,使用new创建对象的时候,那么这个对象就会存在一个默认的不可见的属性[[proto]],来指向了构造函数的原型对象。

<body>
    <script type="text/javascript">
        function Person () {
            
        }   
        /*
            利用构造函数创建一个对象,则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
            指向了构造函数的原型对象。
        */
        var p1 = new Person();
    </script>
</body>

constructor属性存在于原型对象中,它指向了构造函数

<script type="text/javascript">
    function Person () {
    }
    alert(Person.prototype.constructor === Person); // true
    var p1 = new Person();
    //使用instanceof 操作符可以判断一个对象的类型。  
    //typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof,因为引用类型用typeof 总是返回objece。
    alert(p1 instanceof Person);    // true
    alert(typeof p1); // object
</script>

可以为用Person.prototype 属性指定新的对象,来作为Person的原型对象。

<script type="text/javascript">
    function Person () {
        
    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不在执行Person函数
    Person.prototype = {
        name:"志玲",
        age:20
    };
    var p1 = new Person();
    alert(p1.name);  // 志玲
    // p1的类型仍然是Person
    alert(p1 instanceof Person); // true
    //constructor不再执行Peson函数
    alert(Person.prototype.constructor === Person); //false
    //如果constructor对你很重要,你应该在Person.prototype中添加一行这样的代码:
    /*
    Person.prototype = {
        constructor : Person    //让constructor重新指向Person函数
    }
    */
</script>

可以用protocol来判断这个new出来的对象的原型是否是这个原型对象

<script type="text/javascript">
    function Person () {
        
    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不在执行Person函数
    Person.prototype = {
        constructor : Person,
        name:"志玲",
        age:20
    };
    var p1 = new Person();

    alert(p1.__proto__ === Person.prototype);   //true
    
</script>

通过原型可以给原生引用类型(Object,Array,String等)添加自定义方法,例如给String添加Chrome不支持但FF支持的startsWith方法:

var str = 'this is script';
//alert(str.startsWith('this'));//Chrome中报错
String.prototype.startsWith = function(strTarget){
  return this.indexOf(strTarget) === 0;
}
alert(str.startsWith('this'));//不报错了

注意:不建议给原生对象添加原型属性,因为这样可能会意外重写原生方法,影响其它原生代码(调用了该方法的原生代码)

使用 call 或 apply 这两个方法完成函数借调。这两个方法的功能是一样的,只有少许的区别(暂且不管)。功能都是更改一个构造方法内部的 this 指向到指定的对象上。

<script type="text/javascript">
    function Father (name,age) {
        this.name = name;
        this.age = age;
    }
    //如果这样直接调用,那么father中的this只的是 window。 因为其实这样调用的: window.father("李四", 20)
    // name 和age 属性就添加到了window属性上
    Father("李四", 20);
    alert("name:" + window.name + "\nage:" + window.age);  //可以正确的输出

    //使用call方法调用,则可以改变this的指向
    function Son (name, age, sex) {
        this.sex = sex;
        //调用Father方法(看成普通方法),第一个参数传入一个对象this,则this(Son类型的对象)就成为了Father中的this
        Father.call(this, name, age);
    }
    var son = new Son("张三", 30, "男");
    alert("name:" + son.name + "\nage:" + son.age + "\nsex:" + son.sex);
    alert(son instanceof Father); //false
</script>

实现继承的最佳方式(组合继承)

function object(obj){//返回原型为obj的没有实例属性的对象
  function Fun(){}
  Fun.prototype = obj;
  return new Fun();
}
function inheritPrototype(subType, superType){
  var prototype = object(superType.prototype);//建立原型链,继承父类原型属性,用自定义函数object处理是为了避免作为子类原型的父类实例具有实例属性,简单地说,就是为了切掉除多余的实例属性,可以对比组合继承理解
  prototype.constructor = subType;//保证构造器正确,原型链会改变子类持有的构造器引用,建立原型链后应该再改回来
  subType.prototype = prototype;
}

function SubType(arg1, arg2...){
  SuperType.call(this, arg1, arg2...);//继承父类实例属性
  this.attr = value;//子类实例属性
}
inheritPrototype(SubType, SuperType);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容