JS划重点——类和对象的不正经阐述

/在JS 类里面函数也是一个对象,那么要创建一个对象就需要一个类,这个类可以由这个对牛逼的对象-函数来实现/

/首先是普罗大众都会的 工厂模式来创建一类/

function creates(name,sex,age,b) {
var w = new Object;
w.name = name;
w.sex = sex;
w.age = age;
w.single = b;
w.show = function(){
for (prop in w) {
console.log("w." + prop + " = " + w[prop]);
}
}
return w ;
} var w1 = creates('啊港','男',21,true)
var w2 = creates('啊财','男',20,false)
w1.show()
w2.show()

/这种方式创建的对象很不好,每次执行都会有一个show函数被创建,可以这样写来解决对各show函数的问题/

function showinfor(){
for (prop in this) {
console.log(this+"." + prop + " = " + this[prop]);
}
} function creates(name,sex,age,b) {
var w = new Object;
w.name = name;
w.sex = sex;
w.age = age;
w.single = b;
w.show = showinfor
return w ;
}
var w1 = creates('啊港','男',21,true)
var w2 = creates('啊财','男',20,false)
w2.show()
w1.show()

/但看起来就特别别扭,这个show函数一点也不像是对象里面所包含的方法,这就出现了JS的构造函数来解决/

function creatW(name,sex,age,b) {
this.name = name;
this.sex = sex;
this.age = age;
this.single = b;
this.show = function(){
alert(this.name+"使用了构造函数来创建对象")
}; }
var w1 = new creatW('啊港','男',21,true)
w1.show()

/现在可以用new 运算符来创建对象了,里面用的是this,不需要return对象,but 但是这种方式每个对象的shou函数也是不同的和工厂模式同父异母/

/来,邀请原型方式出场/

function w () {

}
w.prototype.name='啊港'
w.prototype.sex='男'
w.prototype.show=function(){
alert(this.name+'使用了原型创建对象')
} var w1 = new w()
w1.show()

/这种方式每个函数创建的对象都会公用里面的属性和方法,但是使用这种方式不能给函数传参来初始化参数,所以构造加原型模式出场/

function w (name,sex,age,b) {
this.name = name;
this.sex = sex;
this.age = age;
this.single = b;
} w.prototype.show=function(){
alert(this.name+'使用了构造加原型创建对象')
} var w1 = new w('啊港','男',21,true)
w1.show()

/这种方式是目前最流行欢迎的创建对象的方式之一,还有一种动态原型创建模式/

function w (name,sex,age,b) {
this.name = name;
this.sex = sex;
this.age = age;
this.single = b;
if(typeof w._initialized == 'undefined'){
w.prototype.show=function(){
alert(this.name+'使用了动态原型创建对象')
}
w._initialized=true
}
} var w1 = new w('啊港','男',21,true)
w1.show()
var w2 = new w('啊财','男',21,true)
w2.show()

/initialized判断是否给已经给原型赋予了任何方法如果没有就创建,然后赋值为true,之后就不会创建show方法/

JS划重点——类和对象的不正经阐述的更多相关文章

  1. js中的类和对象以及自定义对象

    js中的类 1.类的声明 function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a ...

  2. js中有关类、对象的增强函数

    javascript中继承的实现 基础实现 function Range(from,to){ this.from =from; this.to =to; } Range.prototype = { i ...

  3. js中的类数组对象---NodeList

    动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...

  4. js中对类和对象的理解

    类 :对一群具有相同特征的对象的集合的描述:对象:真实存在的对象个体: **面向对象,而不是面向类. 1.一切皆对象,继承靠原型链,多态靠弱类型,封装--虽然可以靠闭包,但我个人更推崇和python一 ...

  5. [JS]如何理解JS中的类和对象

    -------------------------------------------------------------------------------------------- 变量:自由的 ...

  6. 11-Js类和对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 浅谈js的类数组对象arguments

    类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...

  8. js之数组,对象,类数组对象

    许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...

  9. JS创建类和对象

    JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...

随机推荐

  1. RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占优势

    美国时间3月4-8日,国际知名信息安全峰会RSA Conference在美国旧金山开幕,云安全及云可以为企业提供更可靠的资产管理方式成为大会热点. 此次峰会共吸引全球700多家机构参展,其中近42%为 ...

  2. oracle 控制结构

    1.if 逻辑结构 if/then 结构是最简单的条件测试,如果条件为真,则执行程序的一行或者多行,如果条件为假,则什么都不执行, 示例: if  1>2 then null; end if ; ...

  3. selenium(3):学习操作元素基本方法

    来源:<selenium webdriver基于Python源码案例> 一.打开网页①第一步:从selenium里面导入webdriver模块②打开浏览器(Ie和Chrome对应下面的)③ ...

  4. java路径中'/'的使用

    考虑java的跨系统:uinux和winw7中的‘/'标识方法不同,使用下放语句可避免 File.separator;//代表"/"

  5. 【POJ 3294】Life Forms

    [链接]h在这里写链接 [题意] 给你n个字符串. 让你找最长的字符串s; 这个s在超过一半的子串里面都有出现过且长度大于n/2; 如果有多个,输出多行. (按字典序输出) 也没说会不会出现大写. [ ...

  6. JQuery--val()、html()、text()

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. python 代码中的类和对象

  8. 元素的高度(基于vue)

    const viewH =el.target.offsetHeight;//可见高度 const contentH =el.target.scrollHeight;//内容高度 const scrol ...

  9. swiper踩过的哪些坑

    最近,苦恼于各种轮播的需求,每个自己都要自己写,写的挺烦的.终于,在网上发现了swiper插件,发现还是挺实用的,但其中还是踩过了不少的坑,其中有不少都是很简单的问题,但到发现的时候都是花了不少时间, ...

  10. Nuxt.js打造旅游网站第1篇_项目环境搭建

    1. 安装 使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 注意:在NPM版本5.2.0默认安装了npx, ...