对象 this 指向 面向对象
Posted tianpeng2
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对象 this 指向 面向对象相关的知识，希望对你有一定的参考价值。
一、对象，this指向，面向对象(工具)
var obj = { };
var obj2 = new Object( );
function Foo(){}
var obj3 = new Foo()
对象的生命模式
1、对象的功能：对象的功能就是用来存数据的；因为对象可储存结构非常复杂的数据;
案例 存成绩单
var str = "杨怀智 ： 40";
var str2 = "史菲 ：100"；
映射
复杂映射
var arr = [0,1,2,3,4,5,6,7];
2、有序结构：有序结构:key 自动生成自动递增的东西
3、无序自定义结构:
key:自定义的名称；
好处 ：可以快速的对数据进行查找；避免重名的尴尬;语义化更好。
var obj = {
key:value,
key2:value2
}
结构:
obj => arr => obj => arr;
方式 ： 用抽象,结构化数据的方式把数据存入对象中。
抽象数据：
var light = {
long : 100,
liang : 150,
color : "white",
xing : "cicle"
}
json => String;
var item = {
imageUrl : "http://www.image.com/1.png",
title : ‘一本书‘,
price : "998",
describe : {
thitle : "标题",
sellCount : "买了多少"
}
}
题外话:
josn : 后端的专业术语 ， 后端返回给我们的是字符串；
josn ： 应该是 对象方式的 ：{ }
json : {
name:"商品列表",
arr : [ ]
}
二、this指向
普通函数：
1、函数之中谁是当前函数的调用者（引用者）， 函数体内this的指向调用者
this 关键字只出现在函数体中
console.log(this); this指向window
var obj = {
fn : function(){
console.log(this)
}
}
obj.fn();
this指向obj
2、所以没有XXX（对象），调用的函数都是window所属的函数；
所以回调函数默认情况下，this指向都为window;
function foo(){
function poo(){
console.log(this)
}
poo()
}
foo();
this指向window
var obj = {
fn : function(){
function foo(){
console.log(this);
}
foo();
}
}
obj.fn();
this指向window
构造函数的this指向：
1、通过一个函数调用是否用nex调用来区分一个函数是普通函数还是构造函数；
2、构造函数为了面向对象编程而服务；
var obj={
init : function(){
},
bindEvent : function(){
},
show : function(
},
hide : function(){
}
};
可以创造自定义对象的函数 => 构造函数；
function Foo(){};
console.log(typeof new Foo())； //可以确定这是一个对象
console.log(typeof new Object());
console.log(typeof new Array());
instanceof 辨别某个对象来自于哪个构造函数；
console.log(new Foo() instanceof Foo);
console.log(new Array() instanceof Foo);
Foo 函数的实例化对象属于两个构造函数 = > object | Foo ;
构造函数构造了一个对象；
如何向这个构造出来的对象（实例对象）编写
function Foo(){};
var foo = new Foo();
console.log(foo);
function Foo(){
给对象编程； 放入属性和方法；
更改了构造函数内部的this指向；
console.log(this);
this 进行编程
构造函数其实对this （实例化对象）进行编程的地方;
this.init = function(){
}
this.bindEvent = function(){
}
this.show = function(){
}
console.log(this);
};
let foo = new Foo();
console.log(foo);
console.log(foo);
实例化对象和构造函数内部的this指向是一个对象；
构造函数内部的this指向；指向实例化对象
function Foo(){
console.log(this)
}
Foo();
new Foo();
function Foo(){
function poo(){
console,log(this)
}
poo();
}
Foo();
new Foo();
}
this 指向只找第一层函数；就进原则；
this 指向情况；
1普通函数
2、构造函数
1、没有XXX 调用的函数一律指向window;
2 、就近原则
var obj = {
fn : function (){
setTimeout(function(){
console.log(this);
},10)
}
}
obj.fn();
面向对象工具
1、构造函数
2、原型对象
function Foo(){
this.a = 10;
this.b = new Array();
this.c = new function(){
}
this.d = {
}
}
var foo1 = new Foo();
var foo2 = new Foo();
var foo2 = new Foo();
var foo2 = new Foo();
var foo2 = new Foo();
var foo2 = new Foo();
console.log(foo1 === foo2);
console.log(foo1.a === foo2.a );
console.log(foo1.b === foo2.b );
原型是公共的
function Suibian(){
}
任意函数的原型；
prototype
console.log(Suibian.prototype);
constructor: 表面原型属于哪个函数；可以更改但是我们一般不改;
Suibian.prototype.constructor = Window;
_proto_ => 原型指针； 原型链的原理；
把引用类型放在原型之中的好处；
function Suibian(){
}
Suibian.prototype.a = [];
Suibian.prototype.b = function(){
};
Suibian.prototype.c = {}
var suibian = new Suibian();
console.log(suibian);
console.log(suibian.a);
Js本身有一个寻找机制 => 原型链； 根据原型规则进行数据查询；
—proto— 原型指针;
1、实例化对象之中存在原型指针；
2、对象访问数据的时候会根据原型规则进行数据查询（原型链），进行数据查询
访问对象之中一个数据的时候
1、如果有直接返回；
2、如果没有查看是否存在原型指针 _proto_；如果没有undefined;
3、如果有那么沿着指针继续查找，返回原型内的数据；
每个实例化对象之中一定有一根原型指针指向当前构造函数的原型对象；
function Suibian(){
this.a = [];
this.b = {
}
}
Suibian.prototype.a = function(){
}
var suibian1 = new Suibian();
var suibian2 = new Suibian();
console.log(suibian1.a);
console.log(suibian2.a);
suibian1.a.push(10);
suibian2.a.push(20);
console.log(suibian1.a === suibian2.a)
我们不把数组或者对象直接放在原型上；
在面向对象编程的时候我们推荐吧数据放在构造函数里（确保每个对象的数据来源独立）， 把方法放在原型之中（确保方法可以服用）；
http，https
报文
1、保证数据完整性；传输结束之后断开连接。
2、保证高性能地数据传输；
3、即用及走 =》 不知道你是谁的错误；无状态协议；
因为无状态协议容易造成非常糟糕的用户体验，所以我们要给每个http协议打上标签；
张三 = http(张三) > server
李四 = http(李四) > server
王五 = http (王五) > server
验证就是http的身份牌； = > 标识每个http请求的身份
http 经过的所有人都对cookie 有操作权限;
前端 后端
CSRF XSS
加密之后放在前端的cookie tocken;
cookie 就是http 的身份牌
身份牌在哪
http
get post
get只有header
1、header 部分用来验证；
2、POST 才有body；
body用来装载内容的
一但在浏览器上设置了cookie，那么这条cookie 就会跟随所有对应的域名的http请求
每个域名都有一套独立的cookie cookie遵循同源策略
cookie 的特性；
1、时效性；
2、cookie是纯文本；
3、cookie大小有限制；4kb；
4、条数限制:50条；
5、同源策略 ；访问路径有限制。
cookie的本质 ：浏览器创建的一个带有数据的文件
cookie 操作
API
document.cookie
document.cookie = "hello world";
设置的三类数据之间必须用 ；进行分割；
name = value
document.cookie = "username = tp";
2path
21 path =/ 通用cookie ；公开cookie
22 path 不同那么 cookie 也不是同一条cookie ；
document.cookie =" username = tp;path=/";
3expires
31 如果没有设置expires那么这条cookie 就叫做会话cookie
3、2设置了expires cookie就升级为持久cookie ；在规定日期后才会删除；
var d = new Date();
d.setDate(d.getDate()+5)
docment.cookie = "username = tp ;path =/ ; expires = "+d";