Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

继承于Function的构造器

  JavaScript中的原型继承在某些地方也是很坑爹的。在使用new运算符操作一个构造器时,构造器函数内部的this总是一个object。我们无法修改这个this的本质。在内置构造器中有个Function,它却可以new出一个函数来。乍一看这是很神奇的,单事实上它是很蛋疼的。
  首先,咱先把this的本质无法修改的问题说一下,下面是个测试代码 var F=function(){
  console.log(typeof this); //object
  console.log(typeof this.__proto__); //function
};
F.prototype=function(){};
new F;
console.log(typeof new Function); //function
  当我们new一个构造器时候,构造器函数中的this永远是object,只是利用一个__proto__来指向构造器的prototype。那Function这货是怎么做到的!?其实它只是在构造器函数中使用了return而已。不信直接调用试试看= =。 console.log(typeof Function()); //function
var F=function(){
  return function(){};
};
console.log(typeof new F); //function
  所以,这样的话咱也能模拟它了。下面咱就来做个生成多项式函数的构造器的例子。这里我使用了“__proto__”来修改生成函数的继承链。想对IE10-完美兼容的话貌似有点棘手,如果不需要操作继承链条可以直接遍历属性来复制。 <canvas id="canvas"></canvas>
<script>
//生成多项式函数的构造器
var Polynomial=function(){
  if(this==window)return console.error("请温柔地new我哟~");
  var f,s=arguments;
  return f=function(x){
    var i=s.length,r=0;
    while(i--)r+=Math.pow(x,i)*s[i];
    return r;
  },f.__proto__=this.__proto__,f;
};

var w=200,h=200,l=w/2,g,i,f;
//准备坐标系
canvas.width=w,canvas.height=h;
g=canvas.getContext("2d");
g.translate(100.5,-16.5);
g.strokeStyle="gray",g.fillStyle="gray";
g.textAlign="center",g.textBaseline="middle";
g.moveTo(0,16),g.lineTo(0,216),g.stroke();
g.moveTo(-l,h),g.lineTo(l,h),g.stroke();
for(i=-l+20;i<=l-20;i+=20)
  g.fillText(i,i,h+8),g.moveTo(i,h),g.lineTo(i,h-2),g.stroke();
g.textAlign="left";
for(i=20;i<=h-40;i+=20)
  g.fillText(i,5,h-i),g.moveTo(0,h-i),g.lineTo(2,h-i),g.stroke();

//生成多项式函数
f=new Polynomial(0,0,0.02); //y=-0.02*x*x
//绘制多项式图像
g.moveTo(-l,h-f(-l));
g.beginPath();
for(i=-l;i<l;i+=0.1)g.lineTo(i,h-f(i));
g.strokeStyle="blue";
g.stroke();
</script>
  上面代码的运行效果截图:
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^