JavaScript中几个重要的属性

 this
this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window; 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用。 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。
先看一个在全局作用范围内使用this的例子:

代码如下:

<script type=>
console.log( === window);
console.log(window.alert === .alert);
console.log(.parseInt(, 10));
</script>

函数中的this是在运行时决定的,而不是函数定义时,如下:

代码如下:

foo() {
console.log(.fruit);
}
fruit = ;
foo();
pack = {
fruit: ,
foo: foo
};
pack.foo();

全局函数apply和call可以用来改变函数中this的指向,如下:

代码如下:

foo() {
console.log(.fruit);
}
fruit = ;
pack = {
fruit:
};
foo.apply(window);
foo.apply(pack);

注:apply和call两个函数的作用相同,唯一的区别是两个函数的参数定义不同。
因为在JavaScript中函数也是对象,所以我们可以看到如下有趣的例子:

 代码如下:

foo() {
( === window) {
console.log();
}
}
foo.boo = () {
( === foo) {
console.log();
} ( === window) {
console.log();
}
};
foo();
foo.boo();
foo.boo.apply(window);

prototype
prototype本质上还是一个JavaScript对象。 并且每个函数都有一个默认的prototype属性。
如果这个函数被用在创建自定义对象的场景中,我们称这个函数为构造函数。 比如下面一个简单的场景:

 代码如下:

Person(name) {
.name = name;
}
Person.prototype = {
getName: () {
.name;
}
}
zhang = Person();
console.log(zhang.getName());

作为类比,我们考虑下JavaScript中的数据类型 - 字符串(String)、数字(Number)、数组(Array)、对象(Object)、日期(Date)等。 我们有理由相信,在JavaScript内部这些类型都是作为构造函数来实现的,比如:
Array() {
}
arr1 = Array(1, 56, 34, 12);
arr2 = [1, 56, 34, 12];
同时对数组操作的很多方法(比如concat、join、push)应该也是在prototype属性中定义的。
实际上,JavaScript所有的固有数据类型都具有只读的prototype属性(这是可以理解的:因为如果修改了这些类型的prototype属性,则哪些预定义的方法就消失了), 但是我们可以向其中添加自己的扩展方法。
Array.prototype.min = () {
min = [0];
( i = 1; i < .length; i++) {
([i] < min) {
min = [i];
}
}
min;
};
console.log([1, 56, 34, 12].min());
注意:这里有一个陷阱,向Array的原型中添加扩展方法后,当使用for-in循环数组时,这个扩展方法也会被循环出来。
下面的代码说明这一点(假设已经向Array的原型中扩展了min方法):
arr = [1, 56, 34, 12];
total = 0;
( i arr) {
total += parseInt(arr[i], 10);
}
console.log(total);
解决方法也很简单:
arr = [1, 56, 34, 12];
total = 0;
( i arr) {
(arr.hasOwnProperty(i)) {
total += parseInt(arr[i], 10);
}
}
console.log(total);
constructor
constructor始终指向创建当前对象的构造函数。比如下面例子:

代码如下:

arr = [1, 56, 34, 12];
console.log(arr.constructor === Array);
Foo = () { };
console.log(Foo.constructor === Function);
obj = Foo();
console.log(obj.constructor === Foo);
console.log(obj.constructor.constructor === Function);

但是当constructor遇到prototype时,有趣的事情就发生了。
我们知道每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数。如下例所示:

 代码如下:

Person(name) {
.name = name;
};
Person.prototype.getName = () {
.name;
};
p = Person();
console.log(p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);

当时当我们重新定义函数的prototype时(注意:和上例的区别,这里不是修改而是覆盖), constructor的行为就有点奇怪了,如下示例:

代码如下:

Person(name) {
.name = name;
};
Person.prototype = {
getName: () {
.name;
}
};
p = Person();
console.log(p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);

为什么呢?
原来是因为覆盖Person.prototype时,等价于进行如下代码操作:

 代码如下:

Person.prototype = Object({
getName: () {
.name;
}
});

而constructor始终指向创建自身的构造函数,所以此时Person.prototype.constructor === Object,即是:

 代码如下:

Person(name) {
.name = name;
};
Person.prototype = {
getName: () {
.name;
}
};
p = Person();
console.log(p.constructor === Object);
console.log(Person.prototype.constructor === Object);
console.log(p.constructor.prototype.constructor === Object);

怎么修正这种问题呢?方法也很简单,重新覆盖Person.prototype.constructor即可:

 代码如下:

Person(name) {
.name = name;
};
Person.prototype = Object({
getName: () {
.name;
}
});
Person.prototype.constructor = Person;
p = Person();
console.log(p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person); 

时间: 2024-10-02 11:21:06

JavaScript中几个重要的属性的相关文章

javascript中typeof操作符和constucor属性检测

这篇文章主要介绍了javascript中typeof操作符和constucor属性检测的相关资料,需要的朋友可以参考下 *#type.js 代码如下: function Person(name, age) { this.name = name; this.age = age; } var d = {an: 'object'}; var a = ['apple', 'banana']; var f = function() {}; var s = 'David'; var n = 33; var

面向对象-javascript中这两种对象属性有什么区别?

问题描述 javascript中这两种对象属性有什么区别? 第一种:function aaa(){} aaa.a=111; 第二种:function bbb(){} bbb.prototype.b=111; 我在csdn问过第一种,大部分人说属于面向对象的范畴. 但是我看了几篇js面向对象博客,都是用第二种原型的方式: 所以想知道这两种给对象添加属性的行为,在实际应用中有什么区别? 解决方案 如果把aaa,bbb作为方法来看,这两者没有区别. 如果把aaa,bbb作为类来看,那有区别. aaa.

指针-Javascript中通过点操作符定义属性和字面量形式定义的区别

问题描述 Javascript中通过点操作符定义属性和字面量形式定义的区别 我已经有一种这样的困惑:第一种:function Person(){};Person.name = ""liang"";Person.age = 22 ;Person.sayName = function(){alert(this.name)}alert(Person.prototype.constructor == Person) ; // true在以上这个代码中,我创建了一个构造函数P

JavaScript中几个重要的属性(this、constructor、prototype)介绍_基础知识

this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: 复制代码 代码如下: <script type=> console.log( === window); console.log(window.alert === .alert); cons

JavaScript中获取鼠标位置相关属性总结_javascript技巧

javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象. 我们通过监听document的mousemove,就可以实时获得鼠标位置. 但是!!event中和鼠标相关的属性太多了,很让人头大!如下: event.layerX event.layerY event.clientX event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event

javascript中的altKey 和 Event属性大全_javascript技巧

下面给大家介绍javascript中altkey属性,具体介绍如下所示: altKey属性的定义和用法: 此属性返回一个布尔值.指示在指定的事件发生时,Alt键是否被按下并保持住了. 语法结构: event.altKey=true|false|1|0 浏览器支持: 1.IE浏览器支持此属性. 2.火狐浏览器支持此属性. 3.Opera浏览器支持此属性. 4.谷歌浏览器支持此属性. 实例代码: <!DOCTYPE html> <html> <head> <meta

JavaScript中为元素加上name属性的方法_javascript技巧

今天遇到个小问题, 在构建 DOM 时, IE 中不能通过 element.setAttribute('name', _variable); 和 element.name = _variable; 这样的形式来为元素加上 name 属性, 无论是 IE6 还是 IE7. (IE8 是可以的, 但 IE8rc1 不行) 后来我查看了 MSDN, 得到信息如下: 复制代码 代码如下: Internet Explorer 8 and later can set the NAME attribute a

javascript中Window对象的方法属性与生命周期

Window 对象和浏览器窗口1: 一个新文档被装载到窗口或框架中时,那个窗口或框架的 Window 对象就会被重置为默认状态,即由前一个文档中的脚本定义的所有属性和函数都将被清除所有存在过的痕迹.其与前一个此窗口打开的文档无半点瓜葛,出身是绝对的清白.Window 对象和浏览器窗口2: 只要浏览器的顶级窗口存在,那么代表它的Window对象就会一直存在.无论有多少个页面像走城门一样在这个窗口中来来去去,只要浏览器的顶级窗口存在,对它的 Window 对象的引用都有效.这个顶级窗口打开多久,它的

JavaScript中使用Math.PI圆周率属性的方法

 这将返回一个圆到其直径的圆周的比率,大约3.14159. 语法 1 Math.PI 例子: 1 2 3 4 5 6 7 8 9 10 11 <html> <head> <title>JavaScript Math PI Property</title> </head> <body> <script type="text/javascript"> var property_value = Math.PI