首页/电脑学习/内容

如何迅速有效果掌握JavaScript面向对象编程向导图文详细教程

电脑学习2022-11-16 阅读()
本站电脑知识提供电脑入门知识,计算机基础知识,计算机网络应用基础知识,电脑配置知识,电脑故障排除和电脑常识大全,帮助您更好的学习电脑!不为别的，只因有共同的爱好，为中国互联网发展出一分力！
JavaScript 2016语言精髓与编程实践(高清pdf版)

软件等级：

更新时间：2016-04-11

JavaScript 2016语言精髓与编程实践(高清pdf版)

立即下载

怎样快速有效掌握JavaScript面向对象编程指南教程

随着像Node.js这类技术的发展，可以在服务器端使用JavaScript了。你也可以使用JavaScript来控制MongoDB的持续数据存储。使用面向对象就能很好的理清代码，并方便理解和修改代码。就请考虑使用面向对象的模式。

作为一个开发者，是否写出优雅的代码对于你的职业生涯至关重要。到处都是属性、方法，代码极其难懂，天哪，我的程序员，你究竟在做什么？仔细看看这篇指南，让我们一起写出优雅的面向对象的JavaScript代码吧！

文本标记

文本标记只是JavaScript里创建对象的一种方法，当然这里肯定不止这一种，但它是你在只打算创建一个对象实例时的首选方法。



    

  1. var bill = {}; 
    2. 



上面的代码并不实用，它只是一个空对象。接下来我们动态地向这个对象中添加一些属性和方法。




    

  1. bill.name = "Bill E Goat"; 
    2. 

  2. bill.sound = function() { 
    3. 

  3. console.log( 'bahhh!' ); 
    4. 

  4. }; 
    5. 



这里添加了属性name，并且给它分配了值"Bill E Goat"。我们并不需要先创建一个空对象，而可以把所有代码直接写在一对括号里。




    

  1. var bill = { 
    2. 

  2. name: "Bill E Goat", 
    3. 

  3. sound: function() { 
    4. 

  4. console.log( 'bahhh!' ); 
    5. 

  5. }
    6. 

  6. }; 
    7. 



是不是很美观？访问它的属性和方法就像呼吸一样简单、自然。




    

  1. bill.name; // "Bill E Goat" 
    2. 

  2. bill.sound(); // "bahhh" 
    3. 



如果属性名不是一个合法的标志符，我们还可以这样访问它：




    

  1. bill['name']; // "Bill E Goat" 
    2. 



注意：我在调用方法时在其后添加了圆括号。现在，我们再重写一下当前的sound方法，并添加一个参数。




    

  1. bill.sound = function(noise) { 
    2. 

  2. console.log(noise); 
    3. 

  3. }; 
    4. 

  4. bill.sound("brrr!"); // "brrr!" He's cold :)  
    5. 



很好，我们已经传入参数了，并且在方法定义中访问了它。接下来，向对象中增加一个新方法来访问name属性。




    

  1. bill.sayName = function() { 
    2. 

  2. console.log( "Hello " + this.name ); 
    3. 

  3. }; 
    4. 

  4. bill.sayName(); // "Hello Bill E Goat" 
    5. 



我们可以使用this.propertyName（在本例中即this.name）在方法内访问属性。




    

  1. bill.sayName; // function 
    2. 



怎么回事？访问sayName方法返回了一个方法定义。现在让我们再深入些。




    

  1. var sound = bill.sound; 
    2. 

  2. sound('moo!'); // "moo!" 
    3. 



现在我们指定了sound方法为一个局部函数，可以调用这个函数并且传递参数。你认为在复制bill的时候会发生什么？（类比下克隆羊Dolly）




    

  1. var sally = bill; 
    2. 

  2. sally.name; // "Bill E Goat"，可它的名字是Sally
    3. 

  3. sally.name = "Sally"; 
    4. 

  4. sally.name; // "Sally"，好些了
    5. 

  5. bill.name; // "Sally"，问题又转移到bill身上了
    6. 



上面的例子中我们新建了一个变量sally，并使它和bill相同，所以bill和sally会在内存中引用了同一个对象。这时候给改变一块它们就会同时发生改变。再看看下面这段代码：




    

  1. bill.name = "Bill E Goat"; 
    2. 

  2. bill.sayName(); // "Hello Bill E Goat"; 
    3. 

  3. var sayName = bill.sayName; 
    4. 

  4. sayName; // function 目前为止一切顺利
    5. 

  5. sayName(); // "Hello "，为什么这里又不再显示bill的名字了？
    6. 



bill的name是一个本地实例变量，只对bill可得。当sayName方法被创建为全局变量时，当它碰到this.name声明时，它会在全局查找name的值。唯一的问题在于name还没有被定义。现在让我们在全局定义name，看看会发生什么：




    

  1. var name = "Bearded Octo"; 
    2. 

  2. sayName(); // "Hello Bearded Octo" 
    3. 



这里我们在全局范围内定义了name变量，并且赋予了值"Bearded Octo"。当我们在调用sayHello方法时它会在全局范围内查找name变量，最终会获得值"Bearded Octo"。我们为什么不为这几个对象建立一个共同的“类”呢？


构造函数


构造函数是另一个编写面向对象JavaScript代码的方法，当你需要初始化对象的属性、方法，或者需要创建多个属性、方法各不相同的实例时，它将是你最佳的选择。同样我们先从创建一个空对象开始：




    

  1. function Game() {}; 
    2. 



这个对象包括自己的属性，你甚至可以在创建对象时传入属性，然后再对其进行修改。




    

  1. var zelda = new Game(); 
    2. 

  2. var smb = new Game(); 
    3. 

  3. zelda.title = "Legend of Zelda"; 
    4. 

  4. smb.title = "Super Mario Brothers"; 
    5. 

  5. zelda.title; // "Legend of Zelda" 
    6. 

  6. smb.title; // "Super Mario Brothers" 
    7. 



现在这个对象已经有自己的方法了！新创建对象时我们甚至可以传递属性，之后再修改。




    

  1. function Game(title) { 
    2. 

  2. this.title = typeof title !== 'undefined' ? title : ""; 
    3. 

  3. }; 
    4. 

  4. var zelda = new Game("Legend of Zelda"); 
    5. 

  5. zelda.title; // "Legend of Zelda" 
    6. 

  6. zelda.title = "Ocarina of Time"; 
    7. 

  7. zelda.title; // "Ocarina of Time" 
    8. 

  8. var blank = new Game(); 
    9. 

  9. blank.title; // ""  
    10. 



也许你没看明白第二行的内容，其实是使用了三元操作来避免单行的if else，它和下面标准的if else语句是一个意思。




    

  1. if (typeof title !== 'undefined') { 
    2. 

  2. this.title = title; 
    3. 

  3. } else { 
    4. 

  4. this.title = ""; 
    5. 

  5. } 
    6. 

  6. // Is the same as  
    7. 

  7. this.title = typeof title !== 'undefined' ? title : ""; 
    8. 



如果title变量在对象被创建时传入，title实例变量将会指定为title的值。如果没有值传入，那么title将会被初始化为默认值""。我们同样可以创建一个方法来访问这个属性：




    

  1. zelda.loveTitle = function() { 
    2. 

  2. console.log( "I love " + this.title ); 
    3. 

  3. }; 
    4. 

  4. zelda.loveTitle(); // "I love Ocarina of Time" 
    5. 



还可以在Game类中添加一个方法，这样所有Game类的实例将都能使用此方法。




    

  1. Game.prototype.heartIt = function() { 
    2. 

  2. console.log( "I heart " + this.title ); 
    3. 

  3. }; 
    4. 

  4. zelda.heartIt(); // "I heart Ocarina of Time"  
    5. 

  5. smb.heartIt(); // "I heart Super Mario Brothers"  
    6. 



本教程只是JavaScript面向对象编程的入门，希望我的这个大家有所帮助，预祝大家快乐！有问题大家积极回帖讨论下哈！

学习教程快速掌握从入门到精通的电脑知识



      
……
标签:怎样迅速有效果掌握JavaScript面向对象编程向导图文详细教程
 
相关阅读