JS划重点——类和对象的不正经阐述
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划重点——类和对象的不正经阐述的更多相关文章
- js中的类和对象以及自定义对象
js中的类 1.类的声明 function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a ...
- js中有关类、对象的增强函数
javascript中继承的实现 基础实现 function Range(from,to){ this.from =from; this.to =to; } Range.prototype = { i ...
- js中的类数组对象---NodeList
动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...
- js中对类和对象的理解
类 :对一群具有相同特征的对象的集合的描述:对象:真实存在的对象个体: **面向对象,而不是面向类. 1.一切皆对象,继承靠原型链,多态靠弱类型,封装--虽然可以靠闭包,但我个人更推崇和python一 ...
- [JS]如何理解JS中的类和对象
-------------------------------------------------------------------------------------------- 变量:自由的 ...
- 11-Js类和对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 浅谈js的类数组对象arguments
类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...
- js之数组,对象,类数组对象
许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...
- JS创建类和对象
JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...
随机推荐
- leetcode 1-20 easy
1.Two Sum Given an array of integers, return indices of the two numbers such that they add up to a s ...
- web前端学习(四)JavaScript学习笔记部分(3)-- JavaScript函数+异常处理+事件处理
1.Javascript函数-了解函数的用途 1.1.函数: 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 2.Javascript函数-定义函数 2.1.function必须小写 3. ...
- 26718汉字,gbk是23940个汉字,gb18030有76556个汉字
1 a 厑 吖 呵 啊 嗄 嬶 腌 錒 锕 阿 仰 卬 岇 昂 昻 枊 盎 肮 腌 軮 醠 雵 骯 侒 俺 儑 匎 匼 厂 厈 唵 啽 垵 埯 堓 媕 安 屵 岸 峎 峖 广 庵 按 揞 晻 暗 案 ...
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- python第一天 :计算机基础(一)
1.什么是编程语言 答:人类与计算机交流的介质 2.什么是编程 答:利用编程语言控制计算机解决问题 3.为什么要编程 答:可以控制计算机做事,提高生产生活效率 4.计算机的五大组成部分分别有什么作用? ...
- PHP生成短连接的方法
PHP生成短连接的方法.md PHP生成短连接的方法 直接贴上方法,函数可以查看手册. <?php /** 生成短网址 * @param String $url 原网址 * @return St ...
- php文件上传$_FILES数组格式
<form action="" enctype="multipart/form-data" method="post"> < ...
- 【itsdangerous】的加密解密原理(易懂版)
from itsdangerous import TimedJSONWebSignatureSerializer import time from itsdangerous import Signat ...
- es6中的(=>)箭头函数
x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义. 箭头函数有两种格式,一种像上面的,只包含 ...
- WPF TextBox提示文字设定
WPF TextBox框提示文字,鼠标划入提示文字消失 <TextBox Width=" VerticalContentAlignment="Center" Bor ...