0
点赞
收藏
分享

微信扫一扫

JS--总结

炽凤亮尧 2023-05-05 阅读 106
javascriptjavaViewUIUser构造函数JavaScript前端开发


 

JS--总结_ViewUI

JS对象、DOM对象、BOM对象参考手册http://www.w3school.com.cn/jsref/index.asp

JS对象、DOM对象、BOM对象参考手册https://developer.mozilla.org/zh-CN/docs/Web/API 

 

BOM对象：

window、  navigator 、history 、location 、document 、screen、Event

 

DOM对象：HTML上的节点元素都是DOM对象

DOM概述https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction 

文档对象模型 (DOM)https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

使用Javascript和DOM Interfaces来处理HTMLhttps://developer.mozilla.org/zh-CN/docs/%E4%BD%BF%E7%94%A8Javascript%E5%92%8CDOM_Interfaces%E6%9D%A5%E5%A4%84%E7%90%86HTML

 

JS本地对象(内置对象属于本地对象的特例)：

Date、Number、Boolean、String、Array、RegExp、Function、Event、Object、Math(内置对象)、Global(内置对象)

js常用内置方法和对象

                                  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

学习路线

对象（创建、应用、适用范围、注意事项）

创建对象：可以通过对象初始化器(Object Initializer)创建对象；可以创建一个构造函数并使用该函数和new操作符初始化对象

一、通过对象初始化器创建对象的语法:

 



var obj = { property_1:   value_1,   // property_# may be an identifier...
            2:            value_2,   // or a number...
                           // ...,
            "property n": value_n ,  // or a string
			
	    myMethod: function(params) {
		// ...do something
	    }
	};

 


 

二、通过构造函数创建对象的语法:

1、通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。

2、通过 new 创建对象实例。



function myMethod(params) {
  //...do something
}

function Car(make, model, year) { 
   this.make = make; 
   this.model = model; 
   this.year = year;

   this.myMethod=myMethod; 
}

var mycar = new Car("Eagle", "Talon TSi", 1993);



 

可以重写构造函数的定义

 

三、通过Object.create 方法创建对象的语法:

对象也可以用 Object.create() 方法创建。该方法非常有用，因为它允许你为创建的对象选择其原型对象，而不用定义一个构造函数

 


var Animal = {
  type: "Invertebrates",
  displayType : function() {  
    console.log(this.type);
  }
}

var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates

 


属性定义：(私有属性、实例属性和类属性，与Java类似)

 



1）私有属性(只能在对象内部使用)
语法格式：var propertyName=value； 

function User(age){ 
this.age=age; 
var isChild=age<12; 
this.isLittleChild=isChild; 
} 
var user=new User(15); 
alert(user.isLittleChild);//正确的方式 
alert(user.isChild);//报错：对象不支持此属性或方法 


2）实例属性(必须通过对象的实例进行引用)
prototype方式，语法格式：functionName.prototype.propertyName=value 
this方式，语法格式：this.propertyName=value
上面中value可以是字符创、数字和对象
例如： 
function User(){ } 
User.prototype.name=“user1”; 
User.prototype.age=18; 
var user=new User(); 
alert(user.age); 
—————————————– 
function User(name,age,job){ 
this.name=“user1”; 
this.age=18; 
this.job=job; 
} 
alert(user.age); 

3）类属性(可以直接通过类名进行引用)
语法格式：functionName.propertyName=value 
例如： 
function User(){ } 
User.MAX_AGE=200; 
User.MIN_AGE=0; 
alert(User.MAX_AGE); 
参考JS标准对象的类属性： Number.MAX_VALUE //最大数值 Math.PI //圆周率 

4）特别的定义方式
语法格式： obj[index]=value 
例子： 
function User(name){ 
this.name=name; 
this.age=18; 
this[1]=“ok”; 
this[200]=“year”; 
} 
var user=new User(“user1”); 
alert(user[1]); 
注意：不能通过this[1]来获取age属性，也不能通过this[0]来获取name属性，即通过index方式定义的必须使用 index方式来引用，而没有通过index方式定义的，必须以正常方式引用


添加属性(该对象仅为当前对象的属性) 

var myobj = new Object;
myobj.a = 5;
myobj.b = 12;



删除属性 

 



可以用 delete 操作符删除一个不是继承而来的属性 var myobj = new Object; myobj.a = 5; myobj.b = 12; delete myobj.a; 如果一个全局变量不是用 var 关键字声明的话，你也可以用 delete 删除它： g = 17; delete g;



 

 

属性访问：

JavaScript 对象的属性可以通过点符号来访问一个对象的属性，也可以通过方括号访问或者设置

（属性的名称如果不是一个有效的 JavaScript 标识符时只能通过方括号标记访问）

如果最初使用名称定义了一个属性，则必须通过名称来访问它；而如果最初使用序号来定义一个属性，则必须通过索引来访问它

这个限制发生在你通过构造函数创建一个对象和它的属性并且显式地定义了单独的属性（如 myCar.color = "red"）之时。如果你最初使用索引定义了一个对象属性，例如 myCar[5] = "25"，则你只可能通过 myCar[5] 引用它

但是HTML对应的对象(例如 forms 数组)既可以通过其序号（依据其在文档中出现的顺序），也可以按照其名称（如果有的话）访问。举例而言，如果文档中的第二个 <form> 标签有一个 NAME 属性且值为 "myForm"，访问该 form 的方式可以是 document.forms[1]，document.forms["myForm"]或 document.myForm

 



var myObj = new Object(),
    value = "myString",
key1,
key2,
key3;
myObj.key1=value;
myObj[key2]=value ;
myObj["key3"]=value ;
console.log(myObj);
Object {key1: "myString", undefined: "myString", key3: "myString"}

console.log(myObj.key1);//myString
console.log(myObj[key1]);//myString
console.log(myObj["key1"]);//myString

console.log(myObj.key2);//undefined
console.log(myObj[key2]);//myString
console.log(myObj["key2"]);//undefined

console.log(myObj.key3);//myString
console.log(myObj[key3]);//myString
console.log(myObj["key3"]);//myString
总结：对象的属性赋值或访问时，"."方式直接跟属性名；"[]"方式则为属性名的字符串形式

 

for...in 循环:依次访问一个对象及其原型链中所有可枚举的属性(可配合hasOwnProperty方法获取自身的属性)

 Object.keys(o):返回一个对象 oObject.getOwnPropertyNames(o):返回一个数组，它包含了对象 o

 

定义方法(私有方法、实例方法和类方法，与Java类似)



1）、定义私有方法 
私有方法必须在构造函数体内定义，而且只能在构造函数体内使用。 
语法格式：function methodName(arg1,…,argN){ } 
例如： 
function User(name){ 
this.name=name; 
function getNameLength(nameStr){ 
return nameStr.length; 
} 
this.nameLength=getNameLength(this.name);    
} 

2）、定义实例方法，目前也可以使用两种方式： 
prototype方式，在构造函数外使用，语法格式： 
functionName.prototype.methodName=method; 或者 functionName.prototype.methodName=function(arg1,…,argN){}; 
this方式，在构造函数内部使用，语法格式： 
this.methodName=method; 或者 this.methodName=function(arg1,…,argN){}; 
method是外部已经存在的一个方法，methodName要定义的对象的方法，意思就是将外部的一个方法直接赋给对象的某个方法。 

function User(name){ 
this.name=name; 
this.getName=function(){ 
return this.name; 
}; 
this.setName=function(newName){ 
this.name=newName; 
}; 
} 
--------------------------------------
function User(name){ 
this.name=name; 
} 
User.prototype.getName=function(){ 
return this.name; 
}; 
User.prototype.setName=function(newName){ 
this.name=newName; 
}; 

3）、定义类方法 
类方法需要在构造函数外面定义，可以直接通过构造函数名对其进行引用。 
语法格式： 
functionName.methodName=method; 或者 functionName.methodName=function(arg1,…,argN){}; 
例子： 
function User(name){ 
this.name=name; 
} 
User.getMaxAge=getUserMaxAge; 
function getUserMaxAge(){ 
return 200; 
} 
或者 
User.getMaxAge=function(){return 200;}; 
alert(User.getMaxAge());


 

属性与方法的引用 

 

1）从可见性上说： 

私有属性与方法，只能在对象内部引用。 

实例属性与方法，可以在任何地方使用，但必须通过对象来引用。 

类属性与方法，可以在任何地方使用，但不能通过对象的实例来引用（这与Java不同，在Java中静态成员可以通过实例来访问）。 

2）从对象层次上说： 

与Java bean的引用类似，可以进行深层次的引用。 

几种方式： 

简单属性：obj.propertyName 

对象属性：obj.innerObj.propertyName 

索引属性：obj.propertyName[index] 

对于更深层次的引用与上面类似。 

3）从定义方式上说： 

通过index方式定义的属性，必须通过index方式才能引用。 

通过非index方式定义的属性，必须通过正常的方式才能引用。 

另外注意：对象的方法不能通过index方式来定义。 

 

5，属性与方法的动态增加和删除 

1）对于已经实例化的对象，我们可以动态增加和删除它的属性与方法，语法如下（假定对象实例为obj）： 

动态增加对象属性 

obj.newPropertyName=value; 

动态增加对象方法 

obj.newMethodName=method或者=function(arg1,…,argN){} 

动态删除对象属性 

delete obj.propertyName 

动态删除对象方法 

delete obj.methodName 

 

定义 getters 与 setters：

getter 是一个获取某个特定属性的值的方法,setter 是一个设定某个属性的值的方法。你可以为预定义的或用户定义的对象定义 getter 和 setter 以支持新增的属性。定义 getter 和 setter 的语法采用对象字面量语法。

  • 使用 object initializers 定义
  • 也可以之后随时使用 getter 和 setter 添加方法添加到任何对象

一、当使用 object initializers的方式定义getter和setter时，只需要在getter方法前加get，在setter方法前加set，当然，getter方法必须是无参数的，setter方法只接受一个参数(设置为新值） 

var o = {
  a: 7,
  get b() { return this.a + 1; },
  set c(x) { this.a = x / 2; }
};

二、使用Object.defineProperties的方法，同样也可以对一个已创建的对象在任何时候为其添加getter或setter方法。这个方法的第一个参数是你想定义getter或setter方法的对象，第二个参数是一个对象，这个对象的属性名用作getter或setter的名字，属性名对应的属性值用作定义getter或setter方法的函数

var o = { a:0 }

Object.defineProperties(o, {
    "b": { get: function () { return this.a + 1; } },
    "c": { set: function (x) { this.a = x / 2; } }
});

o.c = 10 // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.b) // Runs the getter, which yields a + 1 or 6

选用情况：当你定义一个原型准备进行初始化时，可以选择第一种方式，这种方式更简洁和自然。但是，当你需要添加getter和setter方法 —— 因为并没有编写原型或者特定的对象 ——使用第二种方式更好。第二种方式可能更能表现JavaScript语法的动态特性——但也会使代码变得难以阅读和理解

 

函数（创建、应用、适用范围、注意事项）

 

循环、迭代（适用范围、注意事项）

 

各类型数据的处理（获取、类型转换、运算、封装）

 

 

子类继承父类，将一个新的父类对象赋值给子类构造器函数的 prototype 属性。这样，当创建一个新的子类对象时，它将从父类对象中继承父类的属性

 

继承方法一

层级结构定义继承

 

 

实例对象继承后的属性

 

 

继承方法二

更灵活的构造器

 

注意：

function Engineer (name, projs, mach) {
  this.base = WorkerBee;
  this.base(name, "engineering", projs);
  this.machine = mach || "";
}
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
Employee.prototype.specialty = "none";

对象 jane 不会继承 specialty

function Engineer (name, projs, mach){

this.base = WorkerBee;
  this.base(name, "engineering", projs);
  this.machine = mach || "";
}
Engineer.prototype = new WorkerBee;
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
Employee.prototype.specialty = "none";

继承方法三使用call() / apply() 方法

下面的方式都是等价的

function Engineer (name, projs, mach) {
  this.base = WorkerBee;
  this.base(name, "engineering", projs);
  this.machine = mach || "";
}

function Engineer (name, projs, mach) {
  WorkerBee.call(this, name, "engineering", projs);
  this.machine = mach || "";
}

 

JS创建对象的过程：

var mark = new WorkerBee;

当 JavaScript 发现 new 操作符时，它会创建一个通用(generic)对象，并将其作为关键字 this 的值传递给 WorkerBee 的构造器函数。该构造器函数显式地设置 projects 属性的值，然后隐式地将其内部的 __proto__ 属性设置为 WorkerBee.prototype 的值（属性的名称前后均有两个下划线）。__proto__ 属性决定了用于返回属性值的原型链。一旦这些属性设置完成，JavaScript 返回新创建的对象，然后赋值语句会将变量 mark

 

对象中动态添加属性：

可以在运行时为任何对象添加属性，而不必受限于构造器函数提供的属性(可理解为构造函数定义的默认值)

只需要为该对象指定一个属性值

mark.bonus = 3000;

 

原型中动态添加属性：(该属性将添加到从这个原型中继承属性的所有对象的中)

Employee.prototype.specialty = "none";

 

注意：

如果想在运行时修改一个对象的属性值并且希望该值被所有该对象的后代所继承，您就不能在该对象的构造器函数中定义该属性。而应该将该属性添加到该对象所关联的原型中

例如上图中，修改Engineer.prototype.specialty = "code";Engineer对象的specialty="code"，但是修改Engineer.prototype.name = "king";则Engineer对象的name=" ";

如果希望对象的属性具有默认值，并且希望在运行时修改这些默认值，应该在对象的原型中设置这些属性，而不是在构造器函数中 

 

JS访问对象属性的过程：

  1. 检查本地值是否存在。如果存在，返回该值。
  2. 如果本地值不存在，检查原型链（通过 

__proto__

  1. 如果原型链中的某个对象具有指定属性的值，则返回该值。
  2. 如果这样的属性不存在，则对象没有该属性。

判断实例的关系 

特殊的 __proto__ 属性是在构建对象时设置的；设置为构造器的 prototype 属性的值。所以表达式 new Foo() 将创建一个对象，其 __proto__ ==Foo.prototype。因而，修改 Foo.prototype 的属性，将改变所有通过 new Foo()每个对象或函数都有一个 __proto__ 对象属性（除了 Object）。因此，通过“原型继承（prototype inheritance）”，对象与其它对象之间形成关系。通过比较对象的 __proto__ 属性和函数的 prototype 属性可以检测对象的继承关系。JavaScript 提供了便捷方法：instanceof

 

 

 

 

 

 

 

举报

相关推荐

JS--事件(Event)--使用

js 事件javascript 事件html绑定事件事件处理

JS--事件(Event)--机制/原理

javascript前端开发语言html处理程序

JS--改变this的指向--方法/实例

javascript开发语言ecmascript作用域数组

JS--数组方法--汇总/实例

javascript前端ecmascript数组字符串

JS--异步的日常用法

pythonpytest压力测试单元测试功能测试程序人生职场和发展

JS--继承的实现方式--详解/实例

javascriptlinq父类子类构造函数

js--作用域的知识点

javascript前端开发语言

JS--数组去重的方法--汇总/实例

javascripthtml前端数组数组去重

JS--事件的委托(代理)--使用/教程/实例

javascript开发语言ecmascripthtml事件委托

JS--你没玩过的激流勇进

js游戏激流勇进canvashtml编程语言
0 条评论