一：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. AJAX跨域调用相关知识-CORS和JSONP（引）

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

  2. Qt 5.3.1 版本应用程序的发布问题

    问题描述:用过Qt的朋友,都知道,完成的Qt程序,只能在QT环境里运行.在debug环境里,没有配置环境路线的情况下,必须包含多个dll库,然而每个dll库的大小确实很大的.但有时候还是会失败的,在一 ...

  3. 为什么说外卖O2O行业的未来在于尖端技术？

    7月13日,百度公司董事长兼CEO李彦宏在发布会上谈及百度外卖时表示,百度外卖里有非常多的人工智能技术的应用,比如同样的商家订单,先配送后配送,时间路线规划等等,都有人工智能的技术,涉及机器学习的问题 ...

  4. CSS实现特殊效果

    CSS实现三道杠效果 http://jsbin.com/hocopusuvi/edit?html,css,output CSS实现圆点效果 http://jsbin.com/nojiromaje/ed ...

  5. Java并发包中Lock的实现原理

    1. Lock 的简介及使用 Lock是java 1.5中引入的线程同步工具,它主要用于多线程下共享资源的控制.本质上Lock仅仅是一个接口(位于源码包中的java\util\concurrent\l ...

  6. ubuntu 12.04 "系统的网络服务与此版本的网络管理器不兼容

    ubuntu 12.04 "系统的网络服务与此版本的网络管理器不兼容“ 2013-05-10 21:18 2271人阅读 评论(0) 收藏 举报 今天上午在实验室一顿乱整,不知道整坏了什么, ...

  7. InnoSetup能够实现“安装细节描述”界面吗？

    QUOTE( Example_Test.iss ) // 脚本使用了 增强版脚本编辑器 build 091218:Beta2// 编译器版本为 5.3.6.ee1 [Setup]AppName=My ...

  8. Windows 8.1/Server 2012 R2/Embedded 8.1 with Update 3（MSDN最新版）

    微软于12月16日更新了包含Update 3的ISO,此次更新并不会明显改善用户的界面体验,下载后请校验MD5.我整理了中.英文的8.1/服务器版/嵌入式版本/多国语言包. 1,Windows 8.1 ...

  9. 漫谈Puppet4

    激动人心的改进 速度,速度,还是速度 稳定性和鲁棒性的提升 全新的Parser “不变"的agent 不兼容的改动 包管理方式的变化 配置文件/目录的路径变化 其他路径变化 Director ...

  10. SVO实时全局光照：中等规模场景的GI实现

    RTGI人生成就点unlocked! 快速集成DR+AO+SVO GI,针对中等场景粒度,初步具备全功能,暂未重度优化.附测试对比图.