javascript高级知识点——函数原型

代码信息来自于http://ejohn.org/apps/learn/。

向函数的原型中添加方法

function Ninja(){} 

Ninja.prototype.swingSword = function(){
  return true;
}; 

var ninjaB = new Ninja();
console.log( ninjaB.swingSword(), "Method exists and is callable." );

通过实例化对象可以访问,因为构造函数实例化的对象拥有__proto__属性这个属性的值是构造函数的原型,如果实例化对象本身没有这个方法,它自动去访问__proto__,所以可以调用原型里的方法。

调用顺序

function Ninja(){
  this.swingSword = function(){
    return true;
  };
} 

// Should return false, but will be overridden
Ninja.prototype.swingSword = function(){
  return false;
}; 

var ninja = new Ninja();
console.log( ninja.swingSword(), "调用的是实例化对象方法,而非原型的" );

这个例子可以很好的说明调用顺序:先访问实例化对象自身,如果没有才访问其函数原型中的。

原型的改变影响所有继承它的实例化对象

function Ninja(){
  this.swung = true;
} 

var ninjaA = new Ninja();
var ninjaB = new Ninja(); 

Ninja.prototype.swingSword = function(){
  return this.swung;
}; 

console.log( ninjaA.swingSword(), "即使在定义之后,方法仍然存在" );
console.log( ninjaB.swingSword(), "同样的情况" );

正如先前所说,实例化对象本身没有的属性,它就去函数的原型里寻找。如果原型修改,它寻找的结果也不一样。

问题:构建可以链式调用的方法

function Ninja(){
  this.swung = true;
} 

var ninjaA = new Ninja();
var ninjaB = new Ninja(); 

//在原型里增加一个方法,返回调用者,并修改swung的值

console.log( ninjaA.swing().swung );
console.log( ninjaB.swing().swung );

通过返回this实现

function Ninja(){
  this.swung = true;
} 

var ninjaA = new Ninja(); 

Ninja.prototype.swing= function(){
    this.swung = false;
    return this;
}
console.log( ninjaA.swing().swung ); 

this指向调用它的对象,在方法中返回this,函数执行完毕时,仍然是调用它的对象。

时间: 2024-10-23 22:12:05

javascript高级知识点——函数原型的相关文章

javascript高级知识点——函数的长度

代码信息来自于http://ejohn.org/apps/learn/. 函数的长度属性如何工作? function makeNinja(name){} function makeSamurai(name, rank){} console.log( makeNinja.length == 1, "只定义了一个形参" ); console.log( makeSamurai.length == 2, "定义了两个形参" ); 很清楚,函数的长度就是定义形参的个数. 我们

JavaScript高级特性之原型

JavaScript的原型 原型prototype属性只适用于函数对象(这里的函数对象是自己为了理解更好定义的,普通对象是没有原型属性的) 1.研究函数原型: <script type="text/javascript"> //原型是函数对象的一个属性(普通对象是没有原型属性的.). function Person(){ this.name="李卫康"; this.sayHi=function(){ alert("Hi"); } };

1、JavaScript高级之函数作用域链

作用域链: JavaScript的每个函数function都有自己的作用域,使用Active Object(简称AO)活动对象来保存,在相互嵌套的函数中形成了作用域链,如图: 作用域链就是从里到外的AO链 变量的寻找: 函数fn3中使用的变量,如在fn3作用域内寻找不到,则往外层fn2作用域寻找,以此类推,直到全局对象window 代码演示: var c = 5; function t1(){ var d = 6; function t2(){ var e = 7; var d = 3;//如果

javascript高级知识点——内置对象原型

代码信息来自于http://ejohn.org/apps/learn/. 可以修改内置对象的方法. if (!Array.prototype.forEach) { Array.prototype.forEach = function(fn){ for ( var i = 0; i < this.length; i++ ) { fn( this[i], i, this ); } }; } ["a", "b", "c"].forEach(fun

javascript高级篇——理解原型和作用域【连载中...】

说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和作用域,当然,肯定少不了原型链和作用域链.帮你揭开javascript最神秘的面纱. 为什么要偏偏要讲这两个知识点? 这是我在这么多年学习javascript的经历中,认为最难理解.最常犯错的地方,学习这两个知识点,会让你对javascript有更深层次的理解,至少理解了原型和作用域,就不能再算是javascript菜鸟了.另外,这

javascript高级知识点——继承

代码信息来自于http://ejohn.org/apps/learn/. 继承是如何工作的 function Person(){} function Ninja(){} Ninja.prototype = new Person(); var ninja = new Ninja(); console.log( ninja instanceof Ninja, "ninja自动接收Ninja.prototype里的属性" ); console.log( ninja instanceof Pe

JavaScript高级-----8.函数进阶(2)

3. 严格模式 3.1 概述 3.2 开启严格模式 1. 为脚本开启严格模式 (1) (2) <body> <!-- 为整个脚本(script标签)开启严格模式 --> <!-- (1) --> <script> 'use strict'; //单引号双引号都可以 // 下面的js 代码就会按照严格模式执行代码 </script> <!-- (2) --> <script> (function() { 'use stric

Javascript高级程序设计——函数内部属性与函数属性

函数内部属性 函数内部有两个特殊的属性arguments和this.其中,arguments是类数组对象,包含传入函数中的所有值,这个arguments还有一个属性:callee,这个属性是一个指针,指向拥有arguments的函数.而this据以引用的是函数执行环境对象. function fib(n){ if(n = 1){ return 1; }else{ return n * arguments.callee(n - 1); } } //这里利用函数内arguments的callees属

JavaScript高级程序设计: 函数表达式

闭包 闭包是指有权访问另一个函数函数作用域中的变量(内部变量)的函数. function createComparsionFunction( propertyName ){ return function( object1 , object2 ){ var value1 = object1[ propertyName ]; var value2 = object2[ propertyName ]; if( value1 < value2 ){ return -1; } else if( valu