js面向对象的一些小练习
来源:互联网 发布:锁眼卫星数据 编辑:程序博客网 时间:2024/05/16 18:06
今天来说一下js面向对象的小练习,废话不多说直接上练习,如果你能做出这个练习,说明你对js对象的一些知识已经很清晰了
一、代码
function Foo(){ getName = function(){ alert(1); }; return this; } Foo.getName = function (){alert(2);}; Foo.prototype.getName=function () {alert(3);}; var getName = function (){ alert(4);}; function getName(){alert(5);}// 写出下面的结果 // 1 Foo.getName(); // 2 getName(); // 3 Foo().getName(); // 4 new Foo.getName(); // 5 new Foo().getName(); // 6 new new Foo().getName();
怎么样你已经知道答案了么?
二、具体分析
1.Foo.getName(); 结果 弹出 2
分析:这个应该很简单,直接执行Foo.getName 函数表达式。
2.getName(); 结果 4 ,这个不难
分析:这里有一些知识点,我来详细的说一下,
① 当变量名字(没有赋值的情况下)和 函数名相同时,优先读取函数,也就是:
var getNamefunction getName(){alert(5);}getName(); //结果会是5
3.Foo().getName(); 结果 1
这一块知识点比较多,我们来慢慢分析。
Foo() 函数执行完时,因为Foo()函数中返回了this, 当执行完时,Foo函数内的数据就暴露在了全局环境下,所以 返回的this 也就是Foo()指的是window,
那么你可能会说 在window下getName 函数有两个呀
getName = function(){ alert(1); };var getName = function (){ alert(4);};
为啥不弹出 4, 原因在于var声明的变量被提升了,而 没有用var声明的变量没有被提升(属于全局变量),其次,函数中如果用var 声明的变量,它的作用域是在函数内的,这里没有用var 声明getName 函数表达式,所以Foo().getName() 结果为1 ;
4.new Foo.getName(); 结果 2
这个结果不知道你有没有想对,对于这个结果首先我们需要知道 new 操作符背后做了些什么。可以看一看我以前的文章http://blog.csdn.net/webxiaoma/article/details/65937768
其实在用new 操作符创建对象时,它背后给我们做的一些工作类似于:
var obj1= (function(){ var o={}; //创建一个新对象 o.__proto__=obj.prototype; //将新对象的原型链指向obj的原型 obj.call(o,"hello") //执行obj函数,将o对象指针指向obj函数,及o拥有了obj原型的属性和方法(引用) return o;})()
这里new 出来的构造函数,会继承实例的原型上边的所有属性和方法。
这里弹出来的是 2 ,的原因是
① new操作符在执行时,执行了call 函数(或者apply函数),Foo.getName()
在new 创建对象时,在其内部执行了。你这里这样写new Foo.getName
也会弹出 2;
②这里生成的构造函数是Foo.getName
的构造函数,如果你不信,可以自己手动为Foo.getName的原型添加一个属性或方法(例如: Foo.getName.prototype.name = 4;),然后让后利用创建的构造函数去访问。
var ac = new Foo.getName(); console.log(ac.name) // 4
5.new Foo().getName(); 结果是 3;
如果你上边的结果看懂了,那么这个你将很容易明白。这里和上边的唯一区别就是 函数 Foo 加了括号,这这个区别就改变了构造函数的实例,上边构造出来的函数的实例是Foo.getName
,而这个构造函数的实例是 Foo
函数。
这里 new Foo().getName();
的写法 其实就相当于:
var a = new Foo();a.getName();
好了以上就是我分析的过程,如果有什么错误或问题,欢迎留言。
- js面向对象的一些小练习
- 面向对象小练习
- 面向对象小练习
- js 面向对象练习
- python面向对象小练习
- 面向对象经典小练习
- 关于JS对象的一些小问题
- php面向对象编程的一些小问题
- java中面向对象的一些小知识点(二)
- 关于javaSE面向对象的一些小知识
- js面向对象编程:两个小括号的使用
- js面向对象的一些属性和方法
- js面向对象一些不为人知的属性类型
- 面向对象的编程练习
- 面向对象的js
- js的面向对象
- 面向对象的js
- js的面向对象
- [解决方法]Idal写简单的Spark编程时报错:java.lang.VerifyError: class com.fasterxml.jackson.module.scala.ser.
- Vue2.0 实战 之 上啦加载下拉刷新
- bootstrap的垂直tab——一个菜鸡的学习过程
- QT 使用总结 -----/* 自己编写 */
- Android intent category大全
- js面向对象的一些小练习
- Java读Excel文件
- my self
- 服务器相关知识点
- oracle中计算时间差,精确到时分秒
- Scanner输入时出现的问题
- 手把手教你实现Android RecyclerView上拉加载功能
- 以后自己用的Excel批量导出
- zookeeper启动闪退问题