前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

简介: 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话):   有人说拖延症是一个绝症,哎呀治不好了。先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的影响,单单是自己的念想受到了一定得局限,想法不能够像平地而起的高楼大厦建成一样。

前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

前言(题外话):

  有人说拖延症是一个绝症,哎呀治不好了。先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的影响,单单是自己的念想受到了一定得局限,想法不能够像平地而起的高楼大厦建成一样。可是那大楼也是有烂尾的呀,我觉得最重要的还是外在环境与个人观念的先决条件,决定了拖延症的症状的好坏,有那么一些人,它也有拖延症,但是它在拖的中间,想的更多,看的更远。事情在做的时候更加有条不紊,这拖延症这样看来,它也是好的吧。

1.原型:

  javascript中没有提供传统的面向对象语言中的类(class)式继承,而是通过原型委托的方式来实现的对象与对象之间的继承,javascript也没有抽象类和接口,它在实现类或者设计模式的时候,原型模式提供了类似的方法。原型是用于创建对象的一种模式,可以理解为:“一个对象继承了另一个对象的属性和方法,那么就可以说被继承的对象是这个对象的原型”,更具体的说,就是,对象a通过某种方法引用对象b的属性,那么可以就可以说b是a的原型; 栗子:

/*克隆对象*/
function concat(obj){    
    if(obj instanceof Object){
        if(Object.create!=undefined){   
            return Object.create(obj);  //html5规范中新增Object.create()方法
        }else{
            var F = function(){
            }
            F.prototype = obj;
            return new F();
        }
    }else{
        return -1;
    }
}
var A = {              
    "name":"zhangtaifeng",
    "age":"21"
}
var B = concat(A);
/*************对象B的原型是A*************/
B.job = "qianduankaifa";
alert(B.name);

上面的代码中,对象B通过concat方法克隆了一个对象A() 此时对象A是对象B的原型对象,而最后 B.job = "qianduankaifa"; 则是B对象的默认方法;我们分析控制台打印的结果:

html5规范中新增的Object.create()方法,它将A对象的引用指向了B对象的__proto__属性,__proto__即原型对象在javascript中的表现形式,在firefox控制台中打印可以看到,我们创建的每一个函数都有一个prototype原型属性,而这个对象的用途是包含可以由特定的类型的所有
实例共享的属性和方法

上面这段要理解起来着实不容易,简单的说,javascript中所有的对象都有一个prototype的原型属性,它是用来保存多个对象共享的属性方法的。
来个小例子:我们用来充电的插线板,你把手机通过充电器连接过去,开始充电,那么这个时候,我们如果把手机看成一个对象,这时候可以说插板是手机的充电原型。手机获得了插板的属性----电流;充电器就是他们中间的指针,连接的指针。这时候手机还是可以做其他操作的。
实际上,每个对象默认的原型属性是从Obejct对象克隆继承来的,所以你可以说,对象B的原型是Object;
var A = {
    "name":"zhangtaifeng",
    "age":"21"
}

console.log(A.__proto__===Object.prototype);  //true
 

这段代码最后返回了true; 说明,javascript所有的对象都默认继承了Object.prototype 所以对象可以调用Object提供的操作方法;

 

 

 

2.构造函数:

   构造函数是一个创建对象的方法,通过new fn()的形式创建,它可以被看作类,但是它并不是类,而是函数构造器,javascript的函数既可以作为普通函数被调用,也可以作构造器被调用。当时用new操作符来调用函数时,这个函数就是一个构造函数,它会默认返回一个新的对象,用new运算符来创建对象的过程,实际上也是克隆Object.prototype对象,再进行一些其他操作的过程。

var Parse = function(){        
    this.name = "zhangtaifeng";    
}

var Parse01 = new Parse();    //到这一步 通过new操作符调用了Parse() 那么此时的Parse就是一个构造函数 
alert(Parse01.name)      //zhangtaifeng

构造函数命名首字母需大写,我们打印Parse01查看它的结果:

与上面的对象是同样的,它其实是创建了一个对象并赋值给了Parse01。

构造函数中可以直接设置他的原型对象属性:

var Parse = function(){
    this.name = "zhangtaifeng";    
}
    Parse.prototype = {
        "age":"21"
    }
var Parse01 = new Parse();
alert(Parse01.age)

此时我们再次打印查看结果:

我们可以理解为,每个对象都有一个prototype原型属性,而构造函数的作用就是创建一个对象,只是它可以显示的通过Parse.prototype设置prototype的属性 此时Parse的原型是Parse.prototype这个对象。

 



======================================================== 转载请注明出处。
目录
相关文章
|
10月前
|
JavaScript 前端开发 API
|
11月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
10842 23
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
357 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
277 1
JavaScript中的原型 保姆级文章一文搞懂
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
468 41
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
340 1
|
存储 前端开发 JavaScript
JavaScript常用的内置构造函数
JavaScript提供的内置构造函数在数据处理、对象创建、异常处理和异步操作等方面发挥了重要作用。掌握这些构造函数及其用法,对于开发高效、可靠的JavaScript应用至关重要。通过合理使用这些内置构造函数,开发者可以更好地管理和操作各种类型的数据,提升开发效率和代码质量。
204 1
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
305 3
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    796
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    358
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    279
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    245
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    368
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    513
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    362
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    168
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    347
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    319