`

javaScript之面向对象编程

阅读更多
   
一、自定义构造函数

    即:通过使用 new 操作符调用函数来构造对象。
   
    //定义一个函数
    var Person = function(name){
        this.name = name;
        this.sayHello = function(){
            return "Hi, my name is " + this.name + ".";
        }
    }

    //使用 new 操作符调用函数
    var tom = new Person("Tom");
    tom.sayHello(); // "Hi, my name is Tom."

    当使用 new 操作符调用函数时,将发生一下情况:
   
    1. 创建一个空对象 {} ,并且 this 引用该对象。
    2. 为该对象增加一个属性:__proto__ 。
       该属性指向函数原型的引用。

       函数原型也是一个空对象,在函数创建时被创建,
       同时被增加一个 constructor 属性,指向函数自身。
       var H = function(){};
       console.log( H == H.prototype.constructor); // true

    3. 如果函数没有写return语句的话,返回新创建的对象。
       注意:如果函数中没有定义this,
       该空对象(返回值)至少包含一个属性:__proto__
   
   
   
二、构造函数的返回值

   如果构造函数没有 return 语句,则隐式返回创建的那个新对象。
   但是可以根据需要返回任意对象。(需要写return语句)
  
   var H = function(){
       this.name = "this is this.";
       
       var that = {};
       that.name = "that!";
   
       return that;
   }
   
   //test
   var h = new H();
   h.name; // that!

  
   这种写法的问题在于:新生成的对象丢掉了函数的原型链接。
  
  
  
三、技巧:自调用构造函数(强制使用 new 操作符)

    有时候忘记使用 new 操作符,会出现意想不到的结果。
    
    function H(){
        this.name = "Jake";
    }
    
    var h = H(); 
    console.log(h); // undefined
    


    可以使用 instanceof 关键字 + 递归调用 解决。
    
    function H(){
        if(!(this instanceof H)){
            return new H();
        }
        this.name = "Jake";
    }
    
    //test
    var h1 = new H(),
        h2 = H();
    
    console.log(h1.name); // Jake
    console.log(h2.name); // Jake




—————————————

javascript 函数基础系列文章

1、JavaScript之变量的作用域
2、javascript之变量类型与变量声明及函数变量的运行机制
3、javaScript之function定义
4、javascript之function的prototype对象
5、javascript之function的(closure)闭包特性
6、javascript之function的this   
7、javascript之function的apply(), call()



___________


javascript 面向对象编程系列文章:

    1、javaScript之面向对象编程
    2、javascript之面向对象编程之属性继承
    3、javascript之面向对象编程之原型继承 
   

-



-
引用请注明,
原文出处: http://lixh1986.iteye.com/blog/1958956





-





引用:

Javascript 面向对象编程(一):封装
Javascript面向对象编程(二):构造函数的继承
Javascript面向对象编程(三):非构造函数的继承



______________________________________________________________________________



分享到:
评论

相关推荐

    JavaScript面向对象编程指南

    《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的..., 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库。

    JavaScript面向对象编程指南.pdf

    JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库

    javascript面向对象编程

    面向对象编程的基础知识及其在JavaScript中的运用;数据类型、操作符以及流程控制语句;函数、闭包、对象和原型等概念,以代码重用为目的的继承模式;BOM、DOM、浏览器事件、AJAX和JSON;如何实现JavaScript中缺失的...

    Javascript面向对象编程.

    NULL 博文链接:https://goyourauntie.iteye.com/blog/1179204

    JavaScript面向对象程序设计

    JavaScript面向对象程序设计(1): 前言 JavaScript面向对象程序设计(2): 数组 JavaScript面向对象程序设计(3): 对象 JavaScript面向对象程序设计(4): 函数 JavaScript面向对象程序设计(5): 类 JavaScript面向对象程序...

    JavaScript面向对象编程指南完整版

    JavaScript面向对象编程指南是完整的扫描版...

    JavaScript面向对象编程.pdf

    JavaScript面向对象编程.pdf

    JavaScript面向对象编程指南 pdf

    JavaScript面向对象编程指南 pdf,学习JavaScript实用,难得。

    javascript面向对象编程指南 2nd

    javascript面向对象编程指南 2nd英文版,英文名:Object-Oriented JavaScript。 What you will learn from this book The basics of object-oriented programming, and how to apply it in the JavaScript ...

    JAVASCRIPT 面向对象编程精要

    从一个整体的角度来说明一下Javascript的面向对象的编程。

    JavaScript面向对象编程指南 完整版

    JavaScript面向对象编程指南完整版是扫描的....

    JavaScript面向对象编程指南(第2版)

    资源名称:JavaScript面向对象编程指南(第2版)内容简介:1.本书是唯一一本介绍Javascript面向对象编程的图书。2.本书作者是知名的Web开发人员和作者。受到国内众多前端开发人员,如淘宝UED团队的推崇和推荐...

Global site tag (gtag.js) - Google Analytics