最近段时间主要学习前端去了,然而所遇到的一些问题我觉得有必要去深究一下

prototype:

1 js中有三种表达方法

类方法,属性方法,原型方法

function People(name) {
this.name=name;
//对象方法
this.Introduce=function(){
console.log("My name is "+this.name);
}
}
//类方法
People.Run=function(){
console.log("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
console.log("我的名字是"+this.name);
}
//测试
var p1=new People("xx");
p1.Introduce(); // My name is xx
People.Run(); //I can run
p1.IntroduceChinese(); 我的名字是xx

其实从上面可以看出prototype,实际上向people中添加了一个方法,而这也应官方的解释“prototype 属性使您有能力向对象添加属性和方法"

2 实现继承

function baseClass(){
this.showMessage = function () {
console.log('baseClass:','woc this is bad boy')
}
} // function extendClass(){} function extendClass(){
this.showMessage = function () {
console.log('extendClass:', 'woc this is good body')
}
} function extendClass1(){} extendClass.prototype = new baseClass()
extendClass1.prototype = new baseClass() var eC = new extendClass() //extendClass: woc this is good body var eC1 = new extendClass1() //baseClass: woc this is bad boy
eC.showMessage()
eC1.showMessage()

从上面的案例可以看出如果extendClass()的showMessage存在的情况就会指向自己,如果不存在就会指向其”父类“

call() 和 appyl()

1 每个function中有一个prototype, call(), apply()

call() apply() 我简单的理解为改变你当前对象的指向,这可能有点抽象,看下代码

function method1(arg1, arg2) {
return arg1+arg2
} function method2(arg1, arg2) {
return arg1-arg2
} var result1 = method2.apply(method1,[3,2]); var result2 = method1.call(method2,3,3) console.log(result1); //1
console.log(result2); //6

从上面的实例可以看出两个function的指向发上了改变

call() apply(): 这个是当前的this指针指向调用你的那个function(有点类似copy的意思)

而两者的区别在于apply() 在参数上只有两个参数(当前方法,数组),

而call()的参数则是单个单个的形式

2 实现继承

function father(word) {
this.word = word
this.showName1 = function(){
console.log('Father say:', this.word)
}
} function mother(word) {
this.word = word
this.showName2 = function () {
console.log('Mother say:', this.word)
}
} function child(word) {
// father.apply(this,[word])
father.call(this, word)
mother.call(this, word)
} var c = new child('boys'); c.showName1(); // Father say: boys
c.showName2(); // Mother say: boys

3 好的案例

(1)活用

var result = Math.max(7.25,7.30)

var array = [1,3,4,5,6,0,32.3,3.3]

var result1 = Math.max.apply(null,array);
var result2 = Math.min.apply(null,array);
console.log(result) // 7.3
console.log(result1) // 32.3
console.log(result2) // 0

在js Math.max()中的参数是没有传数组的形式的,而这里通过apply()巧妙地实现了这种转变,首先我们并不需要那个对象去指向Math,所以放了一个null做为参数,然后将arary数组传入其中

(2) 理解

function baseClass() {
this.showMsg = function()
{
console.log("baseClass::showMsg");
} this.baseShowMsg = function()
{
console.log("baseClass::baseShowMsg");
}
}
baseClass.showMsg = function()
{
console.log("baseClass::showMsg static");
} function extendClass()
{
this.showMsg =function ()
{
console.log("extendClass::showMsg");
}
}
extendClass.showMsg = function()
{
console.log("extendClass::showMsg static")
} extendClass.prototype = new baseClass();
var instance = new extendClass(); instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg
instance.showMsg(); //显示extendClass::showMsg baseClass.showMsg.call(instance);//显示baseClass::showMsg static var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

js中call(),apply(),以及prototype的含义的更多相关文章

  1. 深入理解js中的apply、call、bind

    概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...

  2. js中的apply和call API

    借用网上的一个例子: fun.call(this,arg1,arg2,arg3) fun.apply(this,arguments) this.fun(arg1,arg2,arg3) 三种方法等效. ...

  3. Js中的apply和call

    1.call和apply都是为了改变某个函数运行时的上下文而存在的 2.也就是改变函数体内this的指向. 3.二者的作用完全一样,只是接受参数的方式不太一样. 4.call 需要把参数按顺序传递进去 ...

  4. 分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  5. JavaScript中call,apply和prototype

    [TOC] call()方法 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 如果没有提供 thi ...

  6. 深入分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  7. 关于JS中的constructor与prototype

    ======================================================================== 在学习JS的面向对象过程中,一直对constructo ...

  8. 【JavaScript】关于JS中的constructor与prototype

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  9. 【推荐】关于JS中的constructor与prototype【转】

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

随机推荐

  1. C++中一个0xC0000005访问冲突问题

    在冯.诺依曼结构CPU(如i386,ARM A8,A9)的保护模式或者哈佛结构(如8051, ARM M0,.. M3)的CPU下,C++编译器将放置常量的内存设置为只读模式或者放入只读内存中,如果出 ...

  2. python3 用户登录验证的小功能

    用户登录验证,记录一下,还需要修改黑名单不合理 #!/usr/bin/env python3 ''' 需求:编写登录接口 1.输入用户名和密码 2.验证用户密码成功后输出欢迎消息 3.3次没有验证通过 ...

  3. ruby on rails 环境搭建(mac or ubuntu)

    环境配置前操作 mac: app_store安装x-code ubuntu: 终端->配置文件->首选项->命令->以shell方式登录 安装RVM mac: $ ruby - ...

  4. 第一节 如何用Go实现单链表

    一.概念介绍 下面这副图是我们单链表运煤车队. 每节运煤车就是单链表里的元素,每节车厢里的煤炭就是元素中保存的数据.前后车通过锁链相连,作为单链表运煤车,从1号车厢开始,每节车厢都知道后面拉着哪一节车 ...

  5. ASP.NET Web Form 与 ASP.NET MVC 区别

    Asp.net 微软提供web开发框架或者技术.分Web Form和ASP.NET MVC.下面简单说明各自优缺点及使用场景. Web Form ASP.NET Webform提供了一个类似于winf ...

  6. 20155209 2016-2017-2《Java程序设计》课程总结

    20155209 2016-2017-2<Java程序设计>课程总结 预备作业1 刚刚接触Markdown的写法,刚刚接触博客,简单了解娄老师的教学方式. 预备作业2 怎么将学习java像 ...

  7. 20155211实验2 Windows口令破解

    20155211实验2 Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 实验原理 口令破解方法 口令破解主要有两种方法:字典破解和 ...

  8. 实验楼学习linux第一章第四节linux目录结构及文件基本操作

    linux目录结构及文件基本操作 常用命令 切换目录 cd 当前目录 . 上一级目录 .. (.和..开头的都是隐藏文件) 查看隐藏文件 ls -a 上一级所在目录 - 当前用户home目录 ~ 获取 ...

  9. 20155236 2016-2017-2《Java程序设计》课程总结

    20155236 2016-2017-2<Java程序设计>课程总结 作业链接汇总 预备作业1:对专业学习的展望,课程方面.师生关系的建议 预备作业2:在实践中学习,自己的相关经验以及C语 ...

  10. 20155322 2016-2017-2《Java程序设计》课程总结

    学号 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业一:浅谈对师生关系的看法以及对未来学习生活的展望 预备作业二:学习娄老师<做中学> ...