一：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. [MFC] 从文件读取与向文件添加数据

    CString str,str2,str3;str2="dsf",str3="dsfds"; CStdioFile myFile, File; if(myFil ...

  2. HBase在单Column和多Column情况下批量Put的性能对比分析

    作者: 大圆那些事 | 文章可以转载,请以超链接形式标明文章原始出处和作者信息 网址: http://www.cnblogs.com/panfeng412/archive/2013/11/28/hba ...

  3. 构建单页Web应用

    摘自前端农民工的博客 让我们先来看几个网站: coding teambition cloud9 注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情.它们的界面切换非常流畅,响应 ...

  4. 盘点mysql中容易被我们误会的地方

    引语:mysql作为数据库的一大主力军,到处存在于我们各种系统中,相信大家都不陌生!但是,你知道你能用不代表你知道细节,那我们就来盘点盘点其中一些我们平时不太注意的地方,一来为了有趣,二来为了不让自己 ...

  5. Liferay7 BPM门户开发之35: AssetTag的集成查询

    Tag是liferay中的Asset特性,可以用来对信息进行分类,在iferay中的Asset类型为: 1. Web Content(自定义内容) 2. Documents and Media(文档库 ...

  6. 详解Bootstrap导航组件

    在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS:  navs.less SASS:  _navs.scss 标签形导航,也称选项卡导航 标签形 ...

  7. git 创建分支并切换

    git checkout -b fix/base //创建分支 git branch -av 查看所有分支 git checkout master //切换分支

  8. aehyok.com的成长之路三——框架结构

    前言 首先奉上个人网站地址传送门:aehyok.com. aehyok.com的成长之路一——开篇 中主要阐述了自己为什么建立自己的网站,以及个人网站的大致方向. aehyok.com的成长之路二—— ...

  9. RFID Exploration and Spoofer a bipolar transistor, a pair of FETs, and a rectifying full-bridge followed by a loading FET

    RFID Exploration Louis Yi, Mary Ruthven, Kevin O'Toole, & Jay Patterson What did you do? We made ...

  10. netfilter分析

    转自:http://blog.sina.com.cn/s/blog_a31ff26901013n07.html 一.概述 1. Netfilter/IPTables框架简介 Netfilter/IPT ...