js的this和面向对象编程

很奇怪的是很多书或资料没有把这个事情讲清楚。

关键就是在于没有一个整体的思维技术模式,问题被隔离了所以反而不容易理解。

我们先看this,这是js的关键字,指示函数的上下文对象。

这里问题就来了,比如:

?





1

2

3

4

5

6

7

8

9

10

11

var
obj = {};

obj.name = ‘test‘;

obj.output = function
() {

    console.log(this.name);

};

obj.output();

  this指定了上下文对象,当然如果没有指定就会指定到全局变量,window,这就是问题的根源所在。所以最好的解决方案,就是使用‘use
strict‘严格模式,一但出错,比较容易定位问题。

在不用严格模式下,我们看看问题出现在哪里?

重命名变量时:

比如上面,console.log(obj.name),不用this的话,那么在其它代码里obj被另外变量定义,明显要出错。但用了this,代码环境一变就出问题。

比如我们把这个对象重构成构造函数:

function Obj(name) {

....

都要使用this关键字。

但是构造函数也是个函数,稍不注意就会当成普通函数调用。不加new,变成这样。

Obj(‘test‘)...

这时构造函数被错误运行,而它竟争不会出错,为什么呢?在非严格模式下,构造函数的this指向了全局的window,这就是JS最大的缺陷。不仅不能得到正确的运行结果,还污染了全局。在大量的JS里,误调用一个构造函数就是灾难性的结果。

为什么面向对象的程序比如C#,Java不会有这个问题?因为它们使用class关键字,class在定义阶段无法使用(除非明确定义的static属性和方法)

可见,JS的这个严重的this,不仅是全局变量的问题,还影响了整个构造函数的面向对方方式编程,所以安全的方式写构造函数是必须的,就是不用new,也能构造。

当然‘use strict‘只是治标。治本就是要让new 和不new都得到一致的结果。

JS的构造函数,如果直接运行,那么返回结果就是对象,this定义的对象被抛弃,很特别的一点。所以干脆就不用定义this用new,直接使用返回对象。

?





1

2

3

4

5

6

7

8

9

10

11

12

function
pClass() {

    this.Name = ‘test‘;

    this.output = function
() {

        console.log(this.Name);

    }

    return
new pClass();

}

var
p1 = pClass();

var
p2 = new
pClass();

p1.output();

p2.output();

  不用new,倒是对了,第一个问题得到解决,但如果再new就会变成嵌套调用。出错。很明显,出错是因为this,所以我们在内部,直接定义对象返回,做成真正的“构造函数”

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

function
pClass() {

    return
{

        Name: ‘test‘,

        output: function
() {

            console.log(this.Name);

        }

    }

}

var
p1 = pClass();

var
p2 = new
pClass();

p1.output();

p2.output();

  这问题又来了,直接返回对象避免了this的问题,但明显重复,比如p1,p2使用了两个实例的output方法,这是不可以容忍的。

所以这就导致了JS在处理对象的创建方面无法提供有效的机制,this和new不匹配,彻底的解决方案就是ES6,引入class关键字,否则的话,不管怎么创建都没有完美的解决方案,而且代码啰嗦。

在ES5上,次好的解决方案是:

1.引入‘use strict‘,防止错误的构造函数及this

2.构造函数首字母大写,其它的一律驼峰,通过命名来区分

3.创建对象一律使用new,并使用简单的prototype模式

4.非new形式尽量使用module模式

5.最关键的地方,JS对象就不是长项,面向对象编程也并非最佳方式,应该优先考虑组合模式,把对象和方法体分开,这从根源上解决JS的对象弱点。

js的this和面向对象编程

时间: 2024-10-31 05:09:38

js的this和面向对象编程的相关文章

快速理解JavaScript面向对象编程—原型继承

总的来说js语言就是门面向对象编程的语言,对象这个概念几乎贯穿了整个js的学习. 对象 创建对象两种方法:(若要生成对象实例必须调用构造函数) 1.var obj = {name:"jer" , age:12};(在js内部调用了预设的Object()构造函数) 访问:alert(obj.name);//"jer" alert(obj["name"]);//"jer" 2.var obj = new Object(); obj

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

js面向对象编程:如何实现方法重载

js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载 1同名函数的调用问题 都知道在js中如果存在多个名称相同的函数,则调用实际每次都只使用最后一个,js其实是没有重载的,也就是说,如果定义了多个同名的函数,单参数不一样,在调用时,js不管参数个数,只管前后顺序 例如: function test1(arg1) { alert("参数1:"+arg1); } function test1(arg1

js面向对象编程:如何定义常量?

js中有一个关键字const,但目前的浏览器似乎还不支持,如果一定要定义一些常量,其实可以使用闭包,匿名函数实现常量的定义. 例如: var Class = (function() { var UPPER_BOUND = 100;//定义了常量 var Test={}; // 定义了一个静态方法 获取常量的方法 Test.getUPPER_BOUND=function() { return UPPER_BOUND; } return Test; })(); 用法: var k=Class.get

js面向对象编程:两个小括号的使用

在查看很多jQuery的过程中,经常遇到两个小括号的情况. 例如: (function() { alert("测试1"); })(); (function() { alert("测试3"); }()); 其实这段代码,就是定义了一个匿名函数,并且进行了调用, 相当于如下几行代码: (function ListCommon2() { alert("测试1"); })(); (function ListCommon3() { alert("

js面向对象编程:this到底代表什么?

在js中this的用法很让人迷惑,有些像Java或者C#中的this,但又不完全一样.按照流行的说法this总是指向调用方法的对象. 1.纯粹函数调用. function ListCommon2(x) { this.x=x; alert("this 是 ListCommon2"+(this instanceof ListCommon2)); alert("this.constructor"+this.constructor); } function test(){

js面向对象编程:如何检测对象类型

在js中检测对象类型主要有三种,typeof,instanceof,constructor,这几种都可以检测对象的类型,但又有一定的区别.   1使用typeof检测对象类型. typeo作为最常用的检测类型的方法,返回字符串类型,具体使用如下: function testType(value) { var str=typeof(value); // alert(str); switch(str) { case 'undefined': // undefined类型 case 'object'

JS的面向对象编程

//JS的面向对象编程 在这里,原型对象就是类,JS中一切都是类 使用构造函数定义类,再定义对象实例 This指针每个对象都有一个副本,在函数外可以访问,实现JAVA公有变量和成员变量功能 This包含在一个函数中,指代函数的调用者 Prototype可以使属性方法等重用,实现JAVA中函数和静态变量功能 For(var Key in person1){ person1[Key]; } Prototype不能调用私有变量和方法 对象冒充形式实现继承(多重继承) function Person()

js面向对象编程-高级内容

JavaScript面向对象 一.为每个对象动态添加属性或方法 功能:返回对象类型原型的引用 prototype的使用 格式:class.prototype 场景: 比如说:A写了一个类,交给B,B在使用时发现A写的类的功能有所欠缺,但是B没有权力改写A的文件,这时该怎么办? Function Person(name1,age1){ This.name=name1; This.age=age1; } Var p1=new Person(‘zhangsan’,30); p1.sex=’男’ B认为