美文网首页
JavaScript面向对象的概念

JavaScript面向对象的概念

作者: Lwq_长路漫漫 | 来源:发表于2017-05-08 21:16 被阅读0次

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);

相关文章

网友评论

      本文标题:JavaScript面向对象的概念

      本文链接:https://www.haomeiwen.com/subject/zbgqattx.html