Home Web Front-end JS Tutorial javascript 面向对象编程 function是方法(函数)_js面向对象

javascript 面向对象编程 function是方法(函数)_js面向对象

May 16, 2016 pm 06:46 PM
function object-oriented

好程序不是写给computer的,而是写给human的。遇到复杂功能,应该想着把它简化、组件化,把小功能封装成小组件,小功能块可以任意的组合得到千变万化的复杂功能。function就可以帮助我们把功能进行封装。那什么是封装呢。要我说,只要把具体实现给打包,对外提供调用接口那就是封装,方法也好、类也好就做了这些事。

      javascript中的function可以用来创建方法、也可以用来创建类,实际上我们可以认为是用function来模拟出的类(说到类一般都会要去了解闭包的知识)。还是先看一下方法吧。

       javascript函数分为有名函数、匿名函数和在匿名函数基础上延伸出来的立即执行函数。

       普通函数就是用function直接声明的有名函数。

    <SPAN class=kwrd>function</SPAN> Hello() {
Copy after login
Copy after login
Copy after login
      alert(<SPAN class=str>"hello , everybody!"</SPAN>);
Copy after login
Copy after login
Copy after login
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
 
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    Hello();
Copy after login
Copy after login
 
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    <SPAN class=kwrd>function</SPAN> SayHelloTo(somebody) {
Copy after login
      alert(<SPAN class=str>"hello , "</SPAN> + somebody + <SPAN class=str>"!"</SPAN>);
Copy after login
Copy after login
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
 
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    SayHelloTo(<SPAN class=str>"张三"</SPAN>);
Copy after login

上面分别创建了Hello和SayHelloTo方法。Hello不带有参数,直接通过Hello()来完成调用。SayHelloTo方法带有一个参数,向谁问候时需要知道是在问候谁。在调用SayHelloTo(“张三”)时要传入参数。这些代码和java、C#都没有什么太大区别。在方法重载上却有较大改变,javascript本身并不支持什么重载,一个方法名就对应一个方法。如果强制的写出多个同名方法,其实会出现先写的方法被覆盖掉的情况。

    <SPAN class=kwrd>function</SPAN> Hello() {
Copy after login
Copy after login
Copy after login
      alert(<SPAN class=str>"hello , everybody!"</SPAN>);
Copy after login
Copy after login
Copy after login
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
 
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    Hello();
Copy after login
Copy after login
 
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    <SPAN class=kwrd>function</SPAN> Hello(somebody) {
Copy after login
      alert(<SPAN class=str>"hello , "</SPAN> + somebody + <SPAN class=str>"!"</SPAN>);
Copy after login
Copy after login
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
 
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    Hello(<SPAN class=str>"张三"</SPAN>);
Copy after login
Copy after login

imageimage

第一个Hello方法被覆盖掉,执行时直接调用Hello()则认为调用第二个Hello方法但没有传递参数值,所以弹出了undefined信息。调用Hello(“张三”)时很正常的完成执行。其实javascript也可以用一些直白的方式来完成重载。学过C#的人都会知道有个params关键字,通过它可以实现向方法传递不定个数的参数。我们可以通过对参数的信息做手动的判断也可以模拟出类似重载的效果。而在javascript中根本就不需要什么params关键字,就可以很自然的实现任意个数参数的传递。function中有个arguments属性,可以把它看成一个数组,它按传递进来的参数的顺序来保存所有的参数。也就是说我们在定义方法时可以不声明参数名。

    <SPAN class=kwrd>function</SPAN> ShowArguments() {
Copy after login
      <SPAN class=kwrd>var</SPAN> args = <SPAN class=str>""</SPAN>;
Copy after login
      <SPAN class=kwrd>for</SPAN> (<SPAN class=kwrd>var</SPAN> i = 0; i < arguments.length; i++) {
Copy after login
        args += arguments[i] + <SPAN class=str>","</SPAN>;
Copy after login
      };
Copy after login
Copy after login
      alert(args.substr(0, args.length - 1));
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
 
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    ShowArguments(1, 2, 3, 4, 5, 6, 7);
Copy after login

image
试着用argements来模拟一下重载。

    <SPAN class=kwrd>function</SPAN> Hello() {
Copy after login
Copy after login
Copy after login
      <SPAN class=kwrd>if</SPAN> (arguments.length == 0) {
Copy after login
        alert(<SPAN class=str>"hello , everybody!"</SPAN>);
Copy after login
      }
Copy after login
Copy after login
Copy after login
      <SPAN class=kwrd>else</SPAN> {
Copy after login
        alert(<SPAN class=str>"hello , "</SPAN> + arguments[0] + <SPAN class=str>"!"</SPAN>);
Copy after login
      };
Copy after login
Copy after login
    };
Copy after login
Copy after login
 
Copy after login
Copy after login
Copy after login
    Hello();
Copy after login
    Hello(<SPAN class=str>"张三"</SPAN>);
Copy after login
Copy after login

基于参数个数不同的重载。

    <SPAN class=kwrd>function</SPAN> Increase(arg) {
Copy after login
      <SPAN class=kwrd>if</SPAN> (<SPAN class=kwrd>typeof</SPAN> arg == <SPAN class=str>"undefined"</SPAN>) {
Copy after login
        alert(<SPAN class=str>"请输入参数"</SPAN>);
Copy after login
      }
Copy after login
Copy after login
Copy after login
      <SPAN class=kwrd>if</SPAN> (<SPAN class=kwrd>typeof</SPAN> arg == <SPAN class=str>"string"</SPAN>) {
Copy after login
        alert(String.fromCharCode(arg.charCodeAt(0) + 1));
Copy after login
      }
Copy after login
      <SPAN class=kwrd>if</SPAN> (<SPAN class=kwrd>typeof</SPAN> arg == <SPAN class=str>"number"</SPAN>) {
Copy after login
        alert(arg + 1);
Copy after login
      }
Copy after login
Copy after login
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    Increase();
Copy after login
 
Copy after login
Copy after login
Copy after login
    Increase(<SPAN class=str>"a"</SPAN>);
Copy after login
    Increase(1);
Copy after login
基于参数类型不同的重载。

函数除了有名函数之外也可以是匿名函数,匿名函数就是没有名子的函数,不论函数有名还是没有名子,都是一个完整的函数对象。匿名函数还是用function来声明,但不用为它指定名称。其它的方面,比如参数等等和有名函数没什么区别。

    <SPAN class=kwrd>function</SPAN>() {
Copy after login
      ……
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

匿名函数一般可以满足临时的函数需求,不需要有变量对其进行引用(有名的函数可以认为是有变量引用的函数)。比如需要一个函数做为值对象做为参数传入方法、需要编程的方式为对象添加事件,用匿名函数都可以很好的完成。当然你也可以单独声明变量来引用某个匿名函数对象,这和普通有名函数就没什么区别了。

    <SPAN class=kwrd>function</SPAN> Each(array, fun) {
Copy after login
      <SPAN class=kwrd>for</SPAN> (<SPAN class=kwrd>var</SPAN> i = 0; i < array.length; i++) {
Copy after login
        fun(array[i]);
Copy after login
      };
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    <SPAN class=kwrd>var</SPAN> nums = [1, 2, 3, 4, 5, 6, 7];
Copy after login
    Each(nums, <SPAN class=kwrd>function</SPAN>(arg) {
Copy after login
      alert(arg);
Copy after login
    });
Copy after login

上面代码执行,依次输出数组中的元素。

    <SPAN class=rem>//在窗体加载时,在标题上显示当前时间</SPAN>
Copy after login
    window.onload = <SPAN class=kwrd>function</SPAN>() {
Copy after login
      document.title = <SPAN class=kwrd>new</SPAN> Date().toString();
Copy after login
    };
Copy after login
Copy after login
 
Copy after login
Copy after login
Copy after login
    <SPAN class=rem>//也可以将匿名方法传入定时器中</SPAN>
Copy after login
    setInterval(<SPAN class=kwrd>function</SPAN>() {
Copy after login
      document.title = <SPAN class=kwrd>new</SPAN> Date().toString();
Copy after login
    }, 1000);
Copy after login

使用匿名函数绑定事件和进行定时操作。

    <SPAN class=kwrd>var</SPAN> Hello = <SPAN class=kwrd>function</SPAN>() {
Copy after login
      alert(<SPAN class=str>"hello , everybody!"</SPAN>);
Copy after login
Copy after login
Copy after login
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

如果将匿名函数赋给变量,那和有名的普通函数就没区别了。但不管是变量引用还是普通地有名函数,这样的函数在内存上都持久的占有一定资源。有时候我们只想执行一次大不必使用有引用的函数,直接执行匿名函数可能是最好的选择。把匿名函数包起来,加个括号执行,一切ok,这就是由匿名函数延伸出来的立即执行函数。

    (<SPAN class=kwrd>function</SPAN>() {
Copy after login
      alert(<SPAN class=str>"hello , everybody!"</SPAN>);
Copy after login
Copy after login
Copy after login
Copy after login
    })();
Copy after login
 
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
    (<SPAN class=kwrd>function</SPAN>(somebody) {
Copy after login
      alert(<SPAN class=str>"hello , "</SPAN> + somebody + <SPAN class=str>"!"</SPAN>);
Copy after login
Copy after login
Copy after login
    })(<SPAN class=str>"张三"</SPAN>);
Copy after login

立即执行函数在做事件绑定,设置回调函数等方面往往会有意想不到的效果,可以解决诸如对象引用等问题。

    <SPAN class=kwrd>var</SPAN> student = {
Copy after login
      Name: <SPAN class=str>"张三"</SPAN>,
Copy after login
      Age: 20,
Copy after login
      Introduce: <SPAN class=kwrd>function</SPAN>() {
Copy after login
        alert(<SPAN class=str>"我叫"</SPAN> + <SPAN class=kwrd>this</SPAN>.Name + <SPAN class=str>",今年"</SPAN> + <SPAN class=kwrd>this</SPAN>.Age + <SPAN class=str>"岁了!"</SPAN>);
Copy after login
      } };
Copy after login
    window.onload = (<SPAN class=kwrd>function</SPAN>(obj) { <SPAN class=kwrd>return</SPAN> <SPAN class=kwrd>function</SPAN>() { obj.Introduce(); }; })(student);
Copy after login

因为javascript中函数的这些特点加之它的对象的特征,我们还可以写出一些有functional意味的程序出来。其实javascript中function真的是老大。

    <SPAN class=kwrd>function</SPAN> Sum(fun, x) {
Copy after login
      <SPAN class=kwrd>if</SPAN> (x <= 0)
Copy after login
        <SPAN class=kwrd>return</SPAN> 0;
Copy after login
      <SPAN class=kwrd>return</SPAN> fun(x) + Sum(fun, x - 1);
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
  
Copy after login
    alert(Sum(<SPAN class=kwrd>function</SPAN>(i) { <SPAN class=kwrd>return</SPAN> i * i; }, 100));
Copy after login

下面这又是什么呢?是方法吗?是类吗?

    <SPAN class=kwrd>function</SPAN> Point() {
Copy after login
      
Copy after login
    };
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

      先啰嗦到这,下次再看看类。

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does function mean? What does function mean? Aug 04, 2023 am 10:33 AM

Function means function. It is a reusable code block with specific functions. It is one of the basic components of a program. It can accept input parameters, perform specific operations, and return results. Its purpose is to encapsulate a reusable block of code. code to improve code reusability and maintainability.

What is the importance of @JsonIdentityInfo annotation using Jackson in Java? What is the importance of @JsonIdentityInfo annotation using Jackson in Java? Sep 23, 2023 am 09:37 AM

The @JsonIdentityInfo annotation is used when an object has a parent-child relationship in the Jackson library. The @JsonIdentityInfo annotation is used to indicate object identity during serialization and deserialization. ObjectIdGenerators.PropertyGenerator is an abstract placeholder class used to represent situations where the object identifier to be used comes from a POJO property. Syntax@Target(value={ANNOTATION_TYPE,TYPE,FIELD,METHOD,PARAMETER})@Retention(value=RUNTIME)public

Explore object-oriented programming in Go Explore object-oriented programming in Go Apr 04, 2024 am 10:39 AM

Go language supports object-oriented programming through type definition and method association. It does not support traditional inheritance, but is implemented through composition. Interfaces provide consistency between types and allow abstract methods to be defined. Practical cases show how to use OOP to manage customer information, including creating, obtaining, updating and deleting customer operations.

PHP Advanced Features: Best Practices in Object-Oriented Programming PHP Advanced Features: Best Practices in Object-Oriented Programming Jun 05, 2024 pm 09:39 PM

OOP best practices in PHP include naming conventions, interfaces and abstract classes, inheritance and polymorphism, and dependency injection. Practical cases include: using warehouse mode to manage data and using strategy mode to implement sorting.

Analyzing the Flyweight Pattern in PHP Object-Oriented Programming Analyzing the Flyweight Pattern in PHP Object-Oriented Programming Aug 14, 2023 pm 05:25 PM

Analyzing the Flyweight Pattern in PHP Object-Oriented Programming In object-oriented programming, design pattern is a commonly used software design method, which can improve the readability, maintainability and scalability of the code. Flyweight pattern is one of the design patterns that reduces memory overhead by sharing objects. This article will explore how to use flyweight mode in PHP to improve program performance. What is flyweight mode? Flyweight pattern is a structural design pattern whose purpose is to share the same object between different objects.

Are there any class-like object-oriented features in Golang? Are there any class-like object-oriented features in Golang? Mar 19, 2024 pm 02:51 PM

There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes

Analysis of object-oriented features of Go language Analysis of object-oriented features of Go language Apr 04, 2024 am 11:18 AM

The Go language supports object-oriented programming, defining objects through structs, defining methods using pointer receivers, and implementing polymorphism through interfaces. The object-oriented features provide code reuse, maintainability and encapsulation in the Go language, but there are also limitations such as the lack of traditional concepts of classes and inheritance and method signature casts.

C# development experience sharing: object-oriented programming and design principles C# development experience sharing: object-oriented programming and design principles Nov 22, 2023 am 08:18 AM

C# (CSharp) is a powerful and popular object-oriented programming language that is widely used in the field of software development. During the C# development process, it is very important to understand the basic concepts and design principles of object-oriented programming (OOP). Object-oriented programming is a programming paradigm that abstracts things in the real world into objects and implements system functions through interactions between objects. In C#, classes are the basic building blocks of object-oriented programming and are used to define the properties and behavior of objects. When developing C#, there are several important design principles

See all articles