脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Javascript基础回顾 之(三) 面向对象，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 Javascript中的对象
什么是对象
我们可以把Javascript中对象理解为一组无序的键值对，就好像C#中的Dictionary<string,Object>一样。Key是属性的名称，而value可以为以下3种类型：
基本值（string, number, boolean, null, undefined)
对象
函数
复制代码
VAR o = new Object();
o["name"] = "jesse"; //基本值作为对象属性
o["location"] = { //对象作为对象属性
"district":";minhang"
};
// 函数 作为对象属性
o["sayHello"] = function () {
alert("Hello, I am "+ this.name + " From " + this.location.city);
}
o.sayHello();
复制代码
遍历属性
在C#中我们是可以用foreach对Dictionary<string,Object>进行遍历的，如果说对象在Javascript中是一组键值对的话，那我们如何进行遍历呢？
复制代码
for (var p in o) {
alert('name:'+ p +
' tyPE:' + typeof o[p]
);
}
// name:name type:string
// name:location type:object
// name:sayHello type:function
复制代码
上面的这种遍历方式会把原型中的属性也包括进来，关于什么是原型，以及如何区分原型和实例中的属性我们下面会讲到。
创建对象
其实在上面我们已经创建了一个对象，并且使用了以下两种创建对象的方式。
利用new创建一个Object的实例。
字面量
我们上面的o是用第一种方式创建的，而o中的location属性则是用字面量的方式创建的。而第一种方式其实也有一种名字叫做构造函数模式，因为Object实际上是一个构造函数，为我们产生了一个Object的实例。如果对于构造函数这一块还有不清楚的话，赶紧去看我的第一篇 类型基础Object与object吧。
除了以上两种方式以外，我们一些创建对象的方式，我们也来一起看一下：
工厂模式
复制代码
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson('Jesse', 29, 'Software Engineer');
var person2 = createPerson('Carol', 27, 'Designer');
复制代码
这种模式创建的对象有一个问题，那就是它在函数的内部为我创建了一个Object的实例，这个实例跟我们的构造函数createPerson是没有任何关系的。
因为我在内部用new Object()来创建了这个对象，所以它是Object的实例。所以如果我们想知道它是具体哪个function的实例，那就不可能了。
构造函数模式
工厂模式没有解决对象识别的问题，但是我们可以想一下，Object()实际上也是一个函数，只不过当我在它前面加上一个new的时候，它就变成了一个构造函数为我们产生一个Object的实例。那么我同样也可以在其它函数前面加上new这样就可以产生这个函数的实例了，这就是所谓的构造函数模式。
复制代码
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var p1 = new Person('Jesse', 18, 'coder');
alert(p1 instanceof Person); // true
复制代码
详解this
this在Javascript中也可以算是一个很神奇对象，没错this是一个对象。我们在上一篇作用域和作用域链中讲到了变量对象，变量对象决定了在当前的执行环境中有哪些属性和函数是可以被访问到的，从某种程度上来说我们就可以把this看作是这个变量对象。我们之前提到了最大的执行环境是全局执行环境，而window就是全局执行环境中的变量对象，那么我们在全局环境中this===window是会返回true的。
除了全局执行环境以外，我们还提到了另外一种执行环境，也就是函数。每一个函数都有一个this对象，但有时候他们所代表的值是不一样的，主要是这个函数的调用者来决定的。我们来看一下以下几种场景：
函数
function F1(){
return this;
}
f1() === window; // global object
因为当前的函数在全局函数中运行，所以函数中的this对象指向了全局变量对象，也就是window。这种方式在严格模式下会返回undefined。
对象方法
复制代码
var o = {
PRop: 37,
f: function() {
return this.prop;
}
};
console.LOG(o.f()); // logs 37
复制代码
在对象方法中，this对象指向了当前这个实例对象。注意： 不管这个函数在哪里什么时候或者怎么样定义，只要它是一个对象实例的方法，那么它的this都是指向这个对象实例的。
复制代码
var o = { prop: 37 };
var prop = 15;
function independent() {
return this.prop;
}
o.f = independent;
console.log(independent()); // logs 15
console.log(o.f()); // logs 37
复制代码
区别:上面的函数independent如果直接执行，this是指向全局执行环境，那么this.prop是指向我们的全局变量prop的。但是如果将independent设为对象o的一个属性，那么independent中的this就指向了这个实例，同理this.prop就变成了对象o的prop属性。
构造函数
我们上面讲到了用构造函数创建对象，其实是利用了this的这种特性。在构造函数中，this对象是指向这个构造函数实例化出来的对象。
复制代码
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
alert(this.name);
};
}
var p1 = new Person('Jesse', 18, 'coder');
var p2 = new Person('Carol',16,'designer');
复制代码
当我们实例化Person得到p1的时候，this指向p1。而当我们实例化Person得到p2的时候，this是指向p2的。
利用call和apply
当我们用call和apply去调用某一个函数的时候，这个函数中的this对象会被绑定到我们指定的对象上。而call和apply的主要区别就是apply要求传入一个数组作为参数列表。
复制代码
function add(c, d) {
return this.a + this.b + c + d;
}
var o = { a: 1, b: 3 };
// 第一个参数会被绑定成函数add的this对象
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
// 第二个参数是数组作为arguments传入方法add
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
复制代码
在bind方法中
bind方法是 存在于function的原型中的 Function.prototype.bind，也就是说所有的function都会有这个方法。但我们调用某一个方法的bind的时候，会产生一个和原来那个方法一样的新方法，只不过this是指向我们传得bind的第一个参数。
复制代码
function f() {
return this.a;
}
var g = f.bind({ a: "azerty" });
console.log(g()); // azerty
var o = { a: 37, f: f, g: g };
console.log(o.f(), o.g()); // 37, azerty
复制代码
在dom元素事件处理器中
在事件处理函数中，我们的this是指向触发这个事件的dom元素的。
HTML代码
复制代码
<htML>
<body>
<p id="myp" style="width:400px; height:400px; border:1px solid red;"></p>
<script type="text/javascript" src="essence.js"></script>
</body>
</html>
复制代码
JavaScript代码
function click(e) {
alert(this.nodeName);
}
var myDiv = document.getElementById("myp");
myDiv.addEventListener('click', click, false);
当我们点击页面那个p的时候，毫无疑问，它是会显示DIV的。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Javascript基础回顾 之(三) 面向对象全部内容，希望文章能够帮你解决javascript代码实例教程-Javascript基础回顾 之(三) 面向对象所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。