一：js两种定义函数的方式及区别

  • 1：函数声明：
function  sayA() {   alert("i am A");  }
  • 2：函数表达式：
var sayB = function() {   alert("i am B");  }


前者会在代码执行之前提前加载到作用域中，后者则是在代码执行到那一行的时候才会有定义

二：js两种继承方式及区别

  • 对象冒充

    • 临时属性
    • call()
    • apply()
  • 原型链 code
  • 继承应选哪种 code

三：实例

js两种定义函数的方式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>js两种定义函数的方式</title>

<script language="javascript">

    say();

    var say =function(){

        alert("567");

    }

    function say(){

        alert("123");

    }

</script>

</head>

<body>

</body>

</html>

//在javascript函数体内（执行作用域）声明的变量，无论在函数体何处声明，它将都会被提升到函数的顶部，我们称这种现象为变量提升。

函数呢，它也有这种特性，即无论在函数体何处声明另一个函数，它将都会被提升到函数的顶部。

只是采用函数表达式和函数声明所体现的函数提升的内容是有差别的：函数表达式和变量提升类似，只会提升函数的变量，不提升函数的定义；

而函数声明提升时，不仅仅会提升函数的声明，函数的定义也会被提升

对象冒充：临时属性

function Person(name){

     this.name = name;

     this.say = function(){

        alert('My name is '+this.name);

     }

}

function Student(name,id){

    this.temp = Person;

    this.temp(name);

    delete this.temp;

    this.id = id;

    this.showId = function(){

       alert('Good morning,Sir,My student number is '+this.id);

    }

}

var simon = new Student('Simon',9527);

simon.say(); //my name id simon

simon.showId(); //Good morning,Sir,My work number is 9527

对象冒充：apply()/call():

function Person(name){

    this.name = name;

    this.say = function(){

      alert('My name is '+this.name);

    }

}

function Student(name,id){

     Person.call(this,name); //apply()：Person.apply(this,new Array(name));

     this.id = id;

     this.showId = function(){

        alert('Good morning,Sir,My student number is '+this.id);

     }

}

var simon = new Student('Simon',9527);

simon.say();

simon.showId();

//apply(this,arguments):方法能劫持另外一个对象的方法，继承另外一个对象的属性.

                        arguments:是一个数组,new Array(name,age)等

//call(id,name,age)

//什么情况下用apply,什么情况下用call

在给对象参数的情况下,如果参数的形式是数组的时候,

比如apply示例里面传递了参数arguments,这个参数是数组类型,

并且在调用Person的时候参数的列表是对应一致的(也就是Person

和Student的参数列表前两位是一致的) 就可以采用 apply ,

如果我的Person的参数列表是这样的(age,name),而Student

的参数列表是(name,age,grade),这样就可以用call来实现了,

也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

//apply和call中的参数顺序以父类为准。

原型链继承：new

var Shape = function(width, height) {

    this.width = width;

    this.height = height;

};

Shape.prototype.area = function() {

    return this.width * this.height

};

var shape = new Shape(20, 30);

shape.area();

> 600

原型链继承：无new

function Shape(width, height) {

    if (!(this instanceof Shape)) {

        return new Shape(width, height);

    }

    this.width = width;

    this.height = height;

    return this;

}

Shape.prototype.area = function() {

    return this.width * this.height

};

var shape = Shape(20, 30);

console.log(shape.area());

选择最优继承方式：

1：在OO概念中，new实例化后，对象就在堆内存中形成了自己的空间， 值得注意的是，这个代码段。而成员方法就是存在这个代码段的， 并且方法是共用的。问题就在这里，通过对象冒充方式继承时， 所有的成员方法都是指向this的，也就是说new之后，每个实例将 都会拥有这个成员方法，并不是共用的，这就造成了大量的内存浪费。 并且通过对象冒充的方式，无法继承通过prototype方式定义的变量和方法，如以下代码将会出错：

function Person(name){

    this.name = name;

    this.say = function(){

       alert('My name is '+this.name);

    }

}

Person.prototype.age = 20;

Person.prototype.sayAge = function(){alert('My age is '+this.age)};

function Student(name,id){

     Person.apply(this,new Array(name));

         this.id = id;

         this.showId = function(){

         alert('Good morning,Sir,My student number is '+this.id);

     }

}

var simon = new Student('Simon',9527);

simon.sayAge(); //提示TypeError: simon.sayAge is not a function

2：原型链方式继承，就是实例化子类时不能将参数传给父类，这个例子中function Person()没有参数。

function Person(name){

    this.name = name;

}

Person.prototype.say = function(){

    alert('My name is '+this.name);

}

function Student(name,id){

    this.id = id;

    this.showId = function(){

       alert('Good morning,Sir,My student number is '+this.id);

 }

}

Student.prototype = new Person();

//此处无法进行传值，this.name或者name都不行，

//直接写Student.prototype = new Person('wood')是可以的，

//但是这样的话simon.say()就变成了My name is wood

var simon = new Student("Simon",9527);

simon.say();  //弹出 My name is undefined

simon.showId();

结论：

成员变量采用对象冒充方式，成员方法采用原型链方式

function Person(name){

    this.name = name;

}

Person.prototype.say = function(){

    alert('My name is '+this.name);

}

function Student(name,id){

    Person.call(this,name);

    this.id = id;

}

Student.prototype = new Person();

//此处注意一个细节，showId不能写在Student.prototype = new Person();前面

Student.prototype.showId = function(){

    alert('Good morning,Sir,My student number is '+this.id);

}

var simon = new Student("Simon",9527);

simon.say();

simon.showId();

js两种定义函数、继承方式及区别的更多相关文章

  1. Javascript学习笔记：3种定义函数的方式

    ①使用函数声明语法定义函数 function sum(num1,num2){ return num1+num2; } ②使用函数表达式定义函数 var sum=function(num1,num2){ ...

  2. javascript两种声明函数的方式的一次深入解析

    声明函数的方式 javascript有两种声明函数的方式,一个是函数表达式定义函数,也就是我们说的匿名函数方式,一个是函数语句定义函数,下面看代码: /*方式一*/ var FUNCTION_NAME ...

  3. javascript定义函数不同方式的区别

    学习javascript中遇到了这么一个问题,代码如下: var test = 'a'; function test() { alert('Hello World!'); } alert(test); ...

  4. TF之RNN：TF的RNN中的常用的两种定义scope的方式get_variable和Variable—Jason niu

    # tensorflow中的两种定义scope(命名变量)的方式tf.get_variable和tf.Variable.Tensorflow当中有两种途径生成变量 variable import te ...

  5. JS两种声明函数的方法以及调用顺序

    两种声明方法: 1. var a = function () {...}; 2. function a() {...}; 第一种方式必须先声明后调用,而第二种方式函数调用在声明之前之后都可以. //第 ...

  6. get和post两种表单提交方式的区别

    今天看到一篇博客谈论get和post区别,简单总结一下https://www.cnblogs.com/logsharing/p/8448446.html 要说两者的区别,接触过web开发的人基本上都能 ...

  7. Delphi函数指针的两种定义（对象方法存在一个隐藏参数self，所以不能相互赋值）

    delphi中经常见到以下两种定义 Type TMouseProc = procedure (X,Y:integer); TMouseEvent = procedure (X,Y:integer) o ...

  8. OC中两种单例实现方式

    OC中两种单例实现方式 写在前面 前两天探索了一下C++ 的单例,领悟深刻了许多.今天来看看OC中的单例又是怎么回事.查看相关资料,发现在OC中一般有两种实现单例的方式,一种方式是跟C++ 中类似的常 ...

  9. Java中有两种实现多线程的方式以及两种方式之间的区别

    看到一个面试题.问两种实现多线程的方法.没事去网上找了找答案. 网上流传很广的是一个网上售票系统讲解.转发过来.已经不知道原文到底是出自哪里了. Java中有两种实现多线程的方式.一是直接继承Thre ...

随机推荐

  1. libevent （一） socket属性设置与初始化操作

    socket属性设置与初始化操作 libevent是一个事件触发的网络库,适用于windows.linux.bsd等多种平台,内部使用select.epoll.kqueue等系统调用管理事件机制.著名 ...

  2. [游戏学习23] MFC 画尺子

    >_<:这是个简单的MFC程序,有利于了解MFC的框架结构 >_<:Ruler.h #include<afxwin.h> class CMyApp:public C ...

  3. Linux：多文件编辑

    多文件编辑 1.使用vim编辑多个文件 编辑多个文件有两种形式,一种是在进入vim前使用的参数就是多个文件.另一种就是进入vim后再编辑其他的文件. 同时创建两个新文件并编辑 $ vim 1.txt ...

  4. Linux：常用快捷键

    按键 作用 Ctrl+d 键盘输入结束或退出终端 Ctrl+s 暂定当前程序,暂停后按下任意键恢复运行 Ctrl+z 将当前程序放到后台运行,恢复到前台为命令fg Ctrl+a 将光标移至输入行头,相 ...

  5. 常用dom对象

    DOM:文档对象模型 --树模型 文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西 一:window: window.shuxing; 属性(值或者子对象): opener:打开当前窗口的 ...

  6. Paip.Php Java 异步编程。推模型与拉模型。响应式（Reactive）”编程FutureData总结... 1

    Paip.Php  Java 异步编程.推模型与拉模型.响应式(Reactive)"编程FutureData总结... 1.1.1       异步调用的实现以及角色(:调用者 提货单) F ...

  7. JS open App（未安装就跳转下载页面）

    直接上代码var APPCommon = { downAppURl : "http://**/",//下载APP地址 downWeixin: "http://**&quo ...

  8. Javascript提升阶段学习

    JavaScript1:javascript简介 JavaScript是一种脚本语言,能实现网页内容的交互显示,当用户在客户端显示该网页时,浏览器就会执行JavaScript程序,用户通过交互的操作来 ...

  9. 解决安卓SDK更新连不通问题

    http://wenku.baidu.com/link?url=d7t81OFF4_o2YF9iBne-azyovROGPGOozMgWKNyAIQK8vtI0mIjvzpfdOXg7KOobu202 ...

  10. sqlserver内存释放心得

    SQL Server 2008 或者R2的默认内存分配是2147483647MB, 差不多算是无穷大,对于系统内存的管理策略是有多少占多少.SQLserver会把所有处理过的SQL操作缓存在内存里,这 ...