最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

javascript面向对象程序设计实践常用知识点总结

来源:懂视网 责编:小采 时间:2020-11-27 21:53:15
文档

javascript面向对象程序设计实践常用知识点总结

javascript面向对象程序设计实践常用知识点总结:本文实例讲述了javascript面向对象程序设计实践常用知识点。分享给大家供大家参考,具体如下: 实践一:原型中的引用类型的属性是共享的 var Person = function(){}; Person.prototype = { info:{ name:Tom } } var p1 =
推荐度:
导读javascript面向对象程序设计实践常用知识点总结:本文实例讲述了javascript面向对象程序设计实践常用知识点。分享给大家供大家参考,具体如下: 实践一:原型中的引用类型的属性是共享的 var Person = function(){}; Person.prototype = { info:{ name:Tom } } var p1 =

本文实例讲述了javascript面向对象程序设计实践常用知识点。分享给大家供大家参考,具体如下:

实践一:原型中的引用类型的属性是共享的

var Person = function(){};
Person.prototype = {
 info:{
 "name":"Tom"
 }
}
var p1 = new Person();
var p2 = new Person();
p1.info.name = '我是p1';
p2.info.name = '我是p2';
console.log(p1.info.name); // 我是p2
console.log(p2.info.name); // 我是p2

分析:p1,p2都是实例化出来的对象,p1.info 和p2.info 都是指向同一块堆内存,给p1.info.name赋值,和给p2.info.name赋值修改的都是同一个地方,由于代码从上到下依次执行,那么在console的时候自然都是打印出 '我是p2'。总结:由此可以看出原型内的引用类型的属性是共享的。

实践二:原型的引用类型,当实例化后并重新给引用类型属性赋值,地址发生变化。

var Person = function(){};
Person.prototype = {
 info:{
 "name":"Tom"
 }
}
var p1 = new Person();
var p2 = new Person();
p1.info = {"name":"哈哈"};;
console.log(p1.info.name); // 哈哈
console.log(p2.info.name); // Tom

分析:上面代码当执行到 p1.info = {"name":"哈哈"}的时候,p1的info这个引用类型的属性,指向了新的地址。而p2.info 没有做出任何修改,还是指向对象原型中的那个地址。

实践三:对象中值类型的属性不共享

var Person = function(name,age){
 this.name = name;
 this.age = age;
};
var p1 = new Person('Tom',10);
var p2 = new Person('Lucy','8');
console.log(p1.name); // Tom
console.log(p2.name); // Lucy

实践四:属性屏蔽理论

var Person = function () {
 this.name = '小明',
 this.buy = function () {
 console.log('去买面包');
 }
};
Person.prototype = {
 name:"原型中的小明",
 buy:function() {
 console.log('去买汽水');
 },
 age:10
}
var p = new Person();
// 正常情况下我们去访问p里的属性和方法。
// 可以看出原型中的属性和方法的优先级没有构造函数中的高,如果构造函数中没有,会去原型中查找
console.log(p.name);// 小明
p.buy();// 控制台
输出 去买面包 console.log(p.age); // 10 // 如果我们要访问原型中的属性和方法可以这样 delete p.name; // 此处会删除构造函数中的属性 console.log(p.name);// 原型中的小明 Person.prototype.buy(); // 控制台输出 去买汽水

实践五:对象中的 hasOwnProperty 方法

var Person = function () {
 this.name = 'Tom';
}
Person.prototype = {
 age:30
}
var p = new Person();
console.log(Person.hasOwnProperty('name')); // true
console.log(p.hasOwnProperty('name')); // true
console.log(Person.hasOwnProperty('age')); // false
console.log(p.hasOwnProperty('age')); // false
var ClassRoom = {
 contain:100,
 leader:'小明',
 teacher:'王老师'
}
console.log(ClassRoom.hasOwnProperty('leader')); // true
console.log( p.hasOwnProperty === Object.prototype.hasOwnProperty ); //true
console.log( Person.hasOwnProperty === Object.prototype.hasOwnProperty ); //true
console.log( ClassRoom.hasOwnProperty === Object.prototype.hasOwnProperty ); //true

分析:上面说明了一个问题,hasOwnProperty 这个方法是看是不是对象自身下面的属性,可以用对象和实例对象访问,并且只会去找构造函数和字面量中的属性并且 hasOwnProperty 继承自 Object

实践六:自定义对象中的 constructor 和 __proto__(有关原型链的问题,我们以后再来说)

/* 每个实例对象都会默认生成一个constructor 和 __proto__ 属性 这一条不管是内置对象还是自定义对象都是一样的 */
function A() {};
var a = new A();
console.log(a.constructor === A); // true 默认情况下实例的constructor指向实例的构造函数
console.log(a.__proto__ === A.prototype); // true 默认情况下,实例的__proto__属性指向类的prototype
/* 当我们修改 constructor 和 __proto__ 属性时候 */
function B() {};
// 手动修改原型链
B.prototype = {
 __proto__:String.prototype
}
var b = new B();
// instanceof 用来判断obj1是否是obj2的一个实例,可见用 instanceof 来判断数据类型也是不准确的。
// 这里涉及到继承,而js面向对象中的继承就是通过原型链来实现的。
console.log(b instanceof B); // true
console.log(b instanceof String); // true
console.log(b instanceof Object); // true
console.log(b.constructor === B); // false 此处b的构造函数不是B了,因为原型链指到String上去了。
console.log(b.constructor === String); //true
// 手动修改b的constructor ,如果自己不设置,那么就会去寻找原型链,如上
//b.constructor = B; 或者 B.prototype.constructor = B;
// 手动设置后,就会按照设置的来走,如下:
b.constructor = B;
console.log(b.constructor === B); // true
console.log(b.__proto__=== B.prototype); // true
console.log(B.prototype.__proto__=== String.prototype); // true;
// 下面这两个也是原型链的内容
// B是函数,函数的constructor 是 Function,函数的__proto__ 是Function.prototype
console.log(B.constructor === Function); // true
console.log(B.__proto__ === Function.prototype); // true

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

文档

javascript面向对象程序设计实践常用知识点总结

javascript面向对象程序设计实践常用知识点总结:本文实例讲述了javascript面向对象程序设计实践常用知识点。分享给大家供大家参考,具体如下: 实践一:原型中的引用类型的属性是共享的 var Person = function(){}; Person.prototype = { info:{ name:Tom } } var p1 =
推荐度:
标签: 常用 知识 js
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top