专栏首页互联网杂技安静100分钟理解js面向对象

安静100分钟理解js面向对象

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
 </body>
</html>
<script>
 window.onload=function(){
 //安静100分钟来理清js对象,以及类的生成
 //深入理解对象原型与constructor
 //1-----------------------------------------
 //定义一个对象
 function obj(){
 }
 //对象需要一些共用方法,下面通过原型继承
 obj.prototype.name="name";
 obj.prototype.say=function(){
 console.log("h1");
 };
 var obj1=new obj();//实例对象
 console.log(obj1.name);
 obj1.say();
 //上面的方法跑起来一切正常,但是还有另一种方法;
 //2---------------------------------------------------
 function obj2(){
 }
 //专门定义一个放原型对象里面的属性与方法的对象
 //然后在空对象里面添加需要的属性与方法,再赋给真正的原型
 var prototype_test={};
 prototype_test={
 name:"name2",
 say:function(){
 console.log("h2");
 }
 }
 obj2.prototype=prototype_test;
 var obj2=new obj2();//实例对象
 console.log(obj2.name);
 console.log(obj2.constructor);
 obj2.say;
 //这样定义的原型对象,好像比较方便,也容易控制,但是这个原型对象的constructor很明显会指向另一个空对象,而不是本身的obj2
 //原本原型对象的构造器会指向原型本身的。
 //3++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 //于是就有意给原型对象,添加一个叫constructor的属性,避免访问构造器的时候,指向那个空对象。
 function obj3(){
 }
 var prototype_test={};
 prototype_test={
     constructor:obj3,//增加一个属性,指向本身
 name:"name2",
 say:function(){
 console.log("h2");
 }
 };
 obj3.prototype=prototype_test;
 var obj3=new obj3();//实例对象
     console.log(obj3.constructor);
     //这样定义的原型,里面所有的属性与方法都可以被枚举for in
     //原本的构造器虽然是对象的属性,但是并不会被枚举,
 //4---------------------------------------------
 //在高版本浏览器中支持一个重新定义对象的构造器的函数,可以用这个函数给一个对象定义一个指定的构造器
 //可以配置是否被被枚举,就像原生的一样。
 Object.defineProperty(obj,"constructor",{//需要被指定构造器的对象
 enumerable:false,//是否被枚举
 value:obj//指定的构造器
 })
 //5===========================================================
 //原型链的动态特征
 function obj4(){
 }
 var obj4=new obj4();
  obj4.prototype={
 name:"name4"
 }
 //console.log(obj4.name);//这里打印会报错,因为在原型没有给定属性name的时候,以及实例对象obj4,所以obj4并不会有name这个属性
 //6-----------------------------------------
 //规范定义类
 function obj5(name,age,sex){
 this.name=name;
 this.age=age;
 this.sex=sex;
 }
 obj5.prototype={
 constructor:obj5,//指向本身的原型构造器
 say_name:function(){
 console.log(this.name);
 }
 }
  var obj5=new obj5("obj5",33,"none");
  obj5.say_name();
 //7-------------------------------------------------
 //便捷方式,动态模式
 //把原型写在函数内部
  function obj6(name,age,sex){
 this.name=name;
 this.age=age;
 this.sex=sex;
 if(typeof this.say_name!='function'){
   obj6.prototype.say_name=function(){
   console.log(this.name);
   }
  }
 }
  var obj6=new obj6("obj6",33,"none");
  obj6.say_name();
 //8---------------------------------------------
 //安全模式,对象的闭包
 function obj7(name){
  var obj=new Object();
  var name=name;
  obj.say_name=function(){
  console.log(name);
  }
  return obj;
 }
 var obj7=new obj7("name7");
 obj7.say_name();
 }
</script>

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:周立

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-10-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Express.js 4.0 有加入一個新的 Router 功能

    Express.js 4.0 有加入一個新的 Router 功能,它就像一個迷你的應用程式,可以讓應用程式內部的路由撰寫更方便、更有彈性。 Express.js...

    前朝楚水
  • 上一期前端面试题整理答案

    上期答案 1.盒子模型 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(bor...

    前朝楚水
  • HTML5中类jQuery选择器querySelector的使用

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从...

    前朝楚水
  • Echart在Openlayers的应用-航班的炫光特效

    在前两篇文章中讲到了echart在openlayers2中的应用,地图统计图与热力图的实现,在本文中介绍openlayers中结合echart实现航班的炫光特效...

    lzugis
  • 【python】redis模块

    windows下载地址:https://github.com/MSOpenTech/redis/releases

    py3study
  • Python操作Redis的最佳实践

    致码DevOps
  • python PAM30 PAMIE

    安装PAM30,由于没有直接的安装文件 需要下载压缩包 然后把压缩吧解压至python/Lib/site-package/下

    py3study
  • python变量,输入、输出、判断、循环

    声明变量 name = 'ajune' 变量赋值 name = 'ajune' name1 = name

    py3study
  • redis缓存数据库

    NoSQL(NoSQL = Not Only SQL ),意即“不仅仅是SQL”,泛指非关系型的数据库,随着互联网web2.0网站的兴起,传统的关系数据库在应...

    菲宇
  • python技巧分享(十三)

    songleo

扫码关注云+社区

领取腾讯云代金券